From cda138e24335d46a0f020c6f10a62befd7a69349 Mon Sep 17 00:00:00 2001
From: Evangelos Skopelitis <eskopelitis@microsoft.com>
Date: Thu, 19 Dec 2024 17:58:02 -0500
Subject: [PATCH] frontend: Layout: Display main scroll bar under top bar

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
---
 frontend/src/components/App/Layout.tsx        | 22 ++++++++++++++++---
 .../TopBar.NoToken.stories.storyshot          |  2 +-
 .../TopBar.OneCluster.stories.storyshot       |  2 +-
 .../TopBar.ProcessorAction.stories.storyshot  |  2 +-
 .../TopBar.Token.stories.storyshot            |  2 +-
 .../TopBar.TwoCluster.stories.storyshot       |  2 +-
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/App/Layout.tsx b/frontend/src/components/App/Layout.tsx
index 5be1c59afa..6ba44bfa09 100644
--- 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
index ddc6df30a2..a0ad4c190b 100644
--- 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
index 339e216ae1..071496e27c 100644
--- 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
index 3f3e9b4660..99aca52cbf 100644
--- 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
index ddc6df30a2..a0ad4c190b 100644
--- 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
index 5056db2e4e..e6e7da0fff 100644
--- 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"