frontend: Layout: Display main scroll bar under top bar

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
headlamp-k8s · Dec 19, 2024 · cda138e · cda138e
1 parent baf3aea
commit cda138e
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 8 deletions.
diff --git a/frontend/src/components/App/Layout.tsx b/frontend/src/components/App/Layout.tsx
@@ -202,12 +202,28 @@ export default function Layout({}: LayoutProps) {
       >
         {t('Skip to main content')}
       </Link>
-      <Box sx={{ display: 'flex', [theme.breakpoints.down('sm')]: { display: 'block' } }}>
+      <Box
+        sx={{
+          display: 'flex',
+          overflow: 'auto',
+          // paddingTop: '64px',
+          paddingTop: { sm: '64px', xs: '72px' },
+          height: '100vh',
+        }}
+      >
         <VersionDialog />
         <CssBaseline enableColorScheme />
         <TopBar />
         <Sidebar />
-        <Main id="main" sx={{ flexGrow: 1, marginLeft: 'initial' }}>
+        <Main
+          id="main"
+          sx={{
+            flexGrow: 1,
+            marginLeft: 'initial',
+            overflow: 'auto',
+            [theme.breakpoints.down('sm')]: { marginTop: { xs: '-12px', sm: '-8px' } },
+          }}
+        >
           {allClusters &&
           !!clusterInURL &&
           !Object.keys(allClusters).includes(getCluster() || '') ? (
@@ -217,7 +233,7 @@ export default function Layout({}: LayoutProps) {
           )}
           <AlertNotification />
           <Box>
-            <Div sx={theme.mixins.toolbar} />
+            <Div />
             <Container {...containerProps}>
               <NavigationTabs />
               {arePluginsLoaded && (

diff --git a/frontend/src/components/App/__snapshots__/TopBar.NoToken.stories.storyshot b/frontend/src/components/App/__snapshots__/TopBar.NoToken.stories.storyshot
@@ -5,7 +5,7 @@
       class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
     >
       <div
-        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-b3zdwt-MuiToolbar-root"
+        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1g5gxk7-MuiToolbar-root"
       >
         <svg
           fill="none"

diff --git a/frontend/src/components/App/__snapshots__/TopBar.OneCluster.stories.storyshot b/frontend/src/components/App/__snapshots__/TopBar.OneCluster.stories.storyshot
@@ -5,7 +5,7 @@
       class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
     >
       <div
-        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-b3zdwt-MuiToolbar-root"
+        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1g5gxk7-MuiToolbar-root"
       >
         <svg
           fill="none"

diff --git a/frontend/src/components/App/__snapshots__/TopBar.ProcessorAction.stories.storyshot b/frontend/src/components/App/__snapshots__/TopBar.ProcessorAction.stories.storyshot
@@ -5,7 +5,7 @@
       class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
     >
       <div
-        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-b3zdwt-MuiToolbar-root"
+        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1g5gxk7-MuiToolbar-root"
       >
         <svg
           fill="none"

diff --git a/frontend/src/components/App/__snapshots__/TopBar.Token.stories.storyshot b/frontend/src/components/App/__snapshots__/TopBar.Token.stories.storyshot
@@ -5,7 +5,7 @@
       class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
     >
       <div
-        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-b3zdwt-MuiToolbar-root"
+        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1g5gxk7-MuiToolbar-root"
       >
         <svg
           fill="none"

diff --git a/frontend/src/components/App/__snapshots__/TopBar.TwoCluster.stories.storyshot b/frontend/src/components/App/__snapshots__/TopBar.TwoCluster.stories.storyshot
@@ -5,7 +5,7 @@
       class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
     >
       <div
-        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-b3zdwt-MuiToolbar-root"
+        class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1g5gxk7-MuiToolbar-root"
       >
         <svg
           fill="none"