sts-sponsors team mailing list archive

[Peter Makowski <mp+438214@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:update-grid-width into maas-site-manager:main.

Commit message:
feat: update max grid width
 - align columns to the right

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/438214
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:update-grid-width into maas-site-manager:main.

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index 9a5b6a7..9420683 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -1,7 +1,8 @@
-@import "node_modules/vanilla-framework";
 @include vf-base;
 @include vanilla;
 // @include vf-p-table-sortable;
 // @include vf-p-table-expanding;
 @include vf-p-grid;
 @include vf-l-application;
+
+@import "./utils";
diff --git a/frontend/src/_settings.scss b/frontend/src/_settings.scss
new file mode 100644
index 0000000..aed6d8f
--- /dev/null
+++ b/frontend/src/_settings.scss
@@ -0,0 +1,11 @@
+@use "sass:math";
+
+// Vanilla settings:
+$grid-max-width: math.div(1920, 16) * 1rem;
+
+$breakpoint-x-large: 1440px;
+$breakpoint-xx-large: 1920px;
+
+// TODO: uncomment and use local assets path once implemented
+// https://warthogs.atlassian.net/browse/MAASENG-1448
+// $assets-path: "/assets/fonts/";
diff --git a/frontend/src/_utils.scss b/frontend/src/_utils.scss
new file mode 100644
index 0000000..e8571fb
--- /dev/null
+++ b/frontend/src/_utils.scss
@@ -0,0 +1,9 @@
+.u-flex {
+  display: flex !important;
+}
+.u-flex-end {
+  align-items: flex-end !important;
+}
+.u-flex-column {
+  flex-direction: column !important;
+}
diff --git a/frontend/src/components/SitesList/components/SitesTableControls.tsx b/frontend/src/components/SitesList/components/SitesTableControls.tsx
index 076e506..671b707 100644
--- a/frontend/src/components/SitesList/components/SitesTableControls.tsx
+++ b/frontend/src/components/SitesList/components/SitesTableControls.tsx
@@ -21,7 +21,7 @@ const SitesTableControls = ({
           <SitesCount data={data} isLoading={isLoading} /> MAAS Regions
         </h2>
       </Col>
-      <Col size={2}>
+      <Col className="u-flex u-flex-end u-flex-column" size={2}>
         <ColumnsVisibilityControl columns={allColumns} />
       </Col>
     </Row>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 078a2de..ba6e7f7 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -10,7 +10,14 @@ export default defineConfig({
   server: { port: Number(process.env.VITE_UI_PORT) },
   css: {
     preprocessorOptions: {
-      scss: { additionalData: `@import "node_modules/vanilla-framework"; @include vanilla;` },
+      scss: {
+        additionalData: `
+          @use "sass:math";
+          @import "./src/settings.scss";
+          @import "node_modules/vanilla-framework";
+          @include vanilla;
+        `,
+      },
     },
   },
 });