fix(frontend): remove extra page padding

Signed-off-by: Jenny <[email protected]>
kubeflow · Feb 5, 2025 · 896450e · 896450e
1 parent 7bbc881
commit 896450e
Showing 1 changed file with 25 additions and 11 deletions.
diff --git a/clients/ui/frontend/src/shared/style/MUI-theme.scss b/clients/ui/frontend/src/shared/style/MUI-theme.scss
@@ -741,6 +741,7 @@
   --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
   padding: 4px;
 }
+
 .mui-theme .pf-v6-c-masthead {
   --pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
   box-shadow: var(--mui-shadows-1);
@@ -758,9 +759,8 @@
   --pf-v6-c-button--PaddingInlineEnd: none;
 }
 
-.mui-theme .pf-v6-c-page__main-container {
-  --pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius);
-  box-shadow: var(--mui-shadows-1);
+.mui-theme .pf-v6-c-page {
+  --pf-v6-c-page--BackgroundColor: var(--mui-palette-common-white);
 }
 
 .mui-theme .pf-v6-c-pagination {
@@ -786,26 +786,40 @@
 }
 
 .mui-theme .pf-v6-c-page__sidebar {
-  position: absolute; 
-  --pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width); /* Sidebar width */
-  height: 100vh; /* Take full height of viewport */
-  z-index: 300; /* Position sidebar above the masthead */
+  position: absolute;
+  --pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width);
+  /* Sidebar width */
+  height: 100vh;
+  /* Take full height of viewport */
+  z-index: 300;
+  /* Position sidebar above the masthead */
 }
 
-.mui-theme .pf-v6-c-page__main-container {
-  margin-top: var(--kf-central-app-bar-height); /* Move content area below the app bar */
-}
 
 /* Hide Masthead Toggle by default */
 .mui-theme .pf-v6-c-masthead__toggle {
   display: none;
 }
 
 /* Show Masthead Toggle on viewports below 1270px */
-@media (max-width: 1270px) {
+@media (max-width: 1200px) {
   .mui-theme .pf-v6-c-masthead__toggle {
     display: block;
     padding-block-start: var(--mui-spacing-4px);
   }
+
+  .mui-theme .pf-v6-c-page__main-container {
+    margin-left: 0;
+  }
 }
 
+@media (min-width: 1200px) {
+  .mui-theme .pf-v6-c-page__main-container {
+    margin-left: calc(-2 * var(--mui-spacing-16px));
+  }
+
+  .mui-theme .pf-v6-c-page__main-section {
+    --pf-v6-c-page__main-section--PaddingInlineStart: none;
+    --pf-v6-c-page__main-section--PaddingInlineEnd: none;
+  }
+}