From b4a09d2078508f998713d477e5b9e66a38fe1928 Mon Sep 17 00:00:00 2001
From: Evangelos Skopelitis <eskopelitis@microsoft.com>
Date: Thu, 19 Dec 2024 17:55:26 -0500
Subject: [PATCH 1/4] frontend: Sidebar: Display scroll bar under top bar

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
---
 frontend/src/components/Sidebar/Sidebar.tsx                   | 1 +
 .../__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot | 4 ++--
 .../__snapshots__/Sidebar.HomeSidebarOpen.stories.storyshot   | 4 ++--
 .../Sidebar.InClusterSidebarClosed.stories.storyshot          | 4 ++--
 .../Sidebar.InClusterSidebarOpen.stories.storyshot            | 4 ++--
 .../Sidebar.SelectedItemWithSidebarOmitted.stories.storyshot  | 4 ++--
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
index afd0239509..eb49452918 100644
--- a/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -305,6 +305,7 @@ export const PureSidebar = memo(
         <Grid
           sx={{
             height: '100%',
+            overflowY: 'auto',
           }}
           container
           direction="column"
diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot
index b2a45a4e17..6d838025cb 100644
--- a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot
+++ b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot
@@ -11,10 +11,10 @@
           class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"
         >
           <div
-            class="MuiBox-root css-6r4z7i"
+            class="MuiBox-root css-dak3i4"
           />
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-tf9pd2-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-opqjvv-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarOpen.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarOpen.stories.storyshot
index 5411e949ae..bc0857f80b 100644
--- a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarOpen.stories.storyshot
+++ b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarOpen.stories.storyshot
@@ -11,10 +11,10 @@
           class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"
         >
           <div
-            class="MuiBox-root css-6r4z7i"
+            class="MuiBox-root css-dak3i4"
           />
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-tf9pd2-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-opqjvv-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot
index b1c907f256..d6a092d0b2 100644
--- a/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot
+++ b/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot
@@ -11,10 +11,10 @@
           class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"
         >
           <div
-            class="MuiBox-root css-6r4z7i"
+            class="MuiBox-root css-dak3i4"
           />
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-tf9pd2-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-opqjvv-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarOpen.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarOpen.stories.storyshot
index 19e916b6c2..7fc1b0fbb3 100644
--- a/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarOpen.stories.storyshot
+++ b/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarOpen.stories.storyshot
@@ -11,10 +11,10 @@
           class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"
         >
           <div
-            class="MuiBox-root css-6r4z7i"
+            class="MuiBox-root css-dak3i4"
           />
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-tf9pd2-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-opqjvv-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.SelectedItemWithSidebarOmitted.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.SelectedItemWithSidebarOmitted.stories.storyshot
index dedab4e13b..fafd4d59c4 100644
--- a/frontend/src/components/Sidebar/__snapshots__/Sidebar.SelectedItemWithSidebarOmitted.stories.storyshot
+++ b/frontend/src/components/Sidebar/__snapshots__/Sidebar.SelectedItemWithSidebarOmitted.stories.storyshot
@@ -11,10 +11,10 @@
           class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"
         >
           <div
-            class="MuiBox-root css-6r4z7i"
+            class="MuiBox-root css-dak3i4"
           />
           <div
-            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-tf9pd2-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-wrap-xs-nowrap css-opqjvv-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"

From 1d25bef822a8be8f218ebe672cf3d1828ec511ce Mon Sep 17 00:00:00 2001
From: Evangelos Skopelitis <eskopelitis@microsoft.com>
Date: Thu, 19 Dec 2024 17:57:28 -0500
Subject: [PATCH 2/4] frontend: themes: Set fixed toolbar height

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
---
 frontend/src/lib/themes.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/lib/themes.ts b/frontend/src/lib/themes.ts
index 1a02dcd954..57f2ef090c 100644
--- a/frontend/src/lib/themes.ts
+++ b/frontend/src/lib/themes.ts
@@ -30,6 +30,14 @@ const commonRules = {
       xl: 1920,
     },
   },
+  mixins: {
+    toolbar: {
+      minHeight: 64,
+      '@media (max-width:600px)': {
+        minHeight: 60,
+      },
+    },
+  },
   palette: {
     primary: {
       contrastText: '#fff',

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

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
---
 frontend/src/components/App/Layout.tsx        | 75 ++++++++++++-------
 frontend/src/components/App/TopBar.tsx        |  4 +-
 .../TopBar.NoToken.stories.storyshot          |  4 +-
 .../TopBar.OneCluster.stories.storyshot       |  4 +-
 .../TopBar.ProcessorAction.stories.storyshot  |  4 +-
 .../TopBar.Token.stories.storyshot            |  4 +-
 .../TopBar.TwoCluster.stories.storyshot       |  4 +-
 7 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/App/Layout.tsx b/frontend/src/components/App/Layout.tsx
index 7cc581b4e4..ba0a7aafd6 100644
--- a/frontend/src/components/App/Layout.tsx
+++ b/frontend/src/components/App/Layout.tsx
@@ -2,7 +2,6 @@ import { Box, Button } from '@mui/material';
 import Container from '@mui/material/Container';
 import CssBaseline from '@mui/material/CssBaseline';
 import Link from '@mui/material/Link';
-import { useTheme } from '@mui/material/styles';
 import { styled } from '@mui/material/styles';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -103,7 +102,6 @@ export default function Layout({}: LayoutProps) {
   const isFullWidth = useTypedSelector(state => state.ui.isFullWidth);
   const { t } = useTranslation();
   const allClusters = useClustersConf();
-  const theme = useTheme();
 
   /** This fetches the cluster config from the backend and updates the redux store on an interval.
    * When stateless clusters are enabled, it also fetches the stateless cluster config from the
@@ -209,33 +207,54 @@ export default function Layout({}: LayoutProps) {
       >
         {t('Skip to main content')}
       </Link>
-      <Box sx={{ display: 'flex', [theme.breakpoints.down('sm')]: { display: 'block' } }}>
-        <VersionDialog />
-        <CssBaseline enableColorScheme />
+      <VersionDialog />
+      <CssBaseline enableColorScheme />
+      <ActionsNotifier />
+      <Box
+        sx={{
+          display: 'flex',
+          overflow: 'auto',
+          flexDirection: 'column',
+          height: '100dvh',
+        }}
+      >
         <TopBar />
-        <Sidebar />
-        <Main id="main" sx={{ flexGrow: 1, marginLeft: 'initial' }}>
-          {clustersNotInURL.slice(0, MAXIMUM_NUM_ALERTS).map(clusterName => (
-            <ClusterNotFoundPopup key={clusterName} cluster={clusterName} />
-          ))}
-          <AlertNotification />
-          <Box>
-            <Div sx={theme.mixins.toolbar} />
-            <Container {...containerProps}>
-              <NavigationTabs />
-              {arePluginsLoaded && (
-                <RouteSwitcher
-                  requiresToken={() => {
-                    const clusterName = getCluster() || '';
-                    const cluster = clusters ? clusters[clusterName] : undefined;
-                    return cluster?.useToken === undefined || cluster?.useToken;
-                  }}
-                />
-              )}
-            </Container>
-          </Box>
-        </Main>
-        <ActionsNotifier />
+        <Box
+          sx={{
+            display: 'flex',
+            overflow: 'hidden',
+          }}
+        >
+          <Sidebar />
+          <Main
+            id="main"
+            sx={{
+              flexGrow: 1,
+              marginLeft: 'initial',
+              overflow: 'auto',
+            }}
+          >
+            {clustersNotInURL.slice(0, MAXIMUM_NUM_ALERTS).map(clusterName => (
+              <ClusterNotFoundPopup key={clusterName} cluster={clusterName} />
+            ))}
+            <AlertNotification />
+            <Box>
+              <Div />
+              <Container {...containerProps}>
+                <NavigationTabs />
+                {arePluginsLoaded && (
+                  <RouteSwitcher
+                    requiresToken={() => {
+                      const clusterName = getCluster() || '';
+                      const cluster = clusters ? clusters[clusterName] : undefined;
+                      return cluster?.useToken === undefined || cluster?.useToken;
+                    }}
+                  />
+                )}
+              </Container>
+            </Box>
+          </Main>
+        </Box>
       </Box>
     </>
   );
diff --git a/frontend/src/components/App/TopBar.tsx b/frontend/src/components/App/TopBar.tsx
index 70ebb4509f..1ee0775bb1 100644
--- a/frontend/src/components/App/TopBar.tsx
+++ b/frontend/src/components/App/TopBar.tsx
@@ -30,7 +30,6 @@ import { SettingsButton } from '../App/Settings';
 import { ClusterTitle } from '../cluster/Chooser';
 import ErrorBoundary from '../common/ErrorBoundary';
 import { GlobalSearch } from '../globalSearch/GlobalSearch';
-import { drawerWidth } from '../Sidebar';
 import HeadlampButton from '../Sidebar/HeadlampButton';
 import { setWhetherSidebarOpen } from '../Sidebar/sidebarSlice';
 import { AppLogo } from './AppLogo';
@@ -408,9 +407,8 @@ export const PureTopBar = memo(
     return (
       <>
         <AppBar
-          position="fixed"
+          position="static"
           sx={theme => ({
-            marginLeft: drawerWidth,
             zIndex: theme.zIndex.drawer + 1,
             '& > *': {
               color: theme.palette.text.primary,
diff --git a/frontend/src/components/App/__snapshots__/TopBar.NoToken.stories.storyshot b/frontend/src/components/App/__snapshots__/TopBar.NoToken.stories.storyshot
index ddc6df30a2..765d0c877a 100644
--- a/frontend/src/components/App/__snapshots__/TopBar.NoToken.stories.storyshot
+++ b/frontend/src/components/App/__snapshots__/TopBar.NoToken.stories.storyshot
@@ -2,10 +2,10 @@
   <div>
     <nav
       aria-label="Appbar Tools"
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-uuamzf-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..7f9dc12b5c 100644
--- a/frontend/src/components/App/__snapshots__/TopBar.OneCluster.stories.storyshot
+++ b/frontend/src/components/App/__snapshots__/TopBar.OneCluster.stories.storyshot
@@ -2,10 +2,10 @@
   <div>
     <nav
       aria-label="Appbar Tools"
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-uuamzf-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..090638e554 100644
--- a/frontend/src/components/App/__snapshots__/TopBar.ProcessorAction.stories.storyshot
+++ b/frontend/src/components/App/__snapshots__/TopBar.ProcessorAction.stories.storyshot
@@ -2,10 +2,10 @@
   <div>
     <nav
       aria-label="Appbar Tools"
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-uuamzf-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..765d0c877a 100644
--- a/frontend/src/components/App/__snapshots__/TopBar.Token.stories.storyshot
+++ b/frontend/src/components/App/__snapshots__/TopBar.Token.stories.storyshot
@@ -2,10 +2,10 @@
   <div>
     <nav
       aria-label="Appbar Tools"
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-uuamzf-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..d2313cb9ee 100644
--- a/frontend/src/components/App/__snapshots__/TopBar.TwoCluster.stories.storyshot
+++ b/frontend/src/components/App/__snapshots__/TopBar.TwoCluster.stories.storyshot
@@ -2,10 +2,10 @@
   <div>
     <nav
       aria-label="Appbar Tools"
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-1nczbvg-MuiPaper-root-MuiAppBar-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-uuamzf-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"

From dc50e7b983a5e554aead80af97141f591f54f67c Mon Sep 17 00:00:00 2001
From: Evangelos Skopelitis <eskopelitis@microsoft.com>
Date: Fri, 20 Dec 2024 16:12:10 -0500
Subject: [PATCH 4/4] frontend: Sidebar: Resize sidebar when overflowing

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
---
 frontend/src/components/Sidebar/Sidebar.tsx   | 32 +++++++++++++------
 ...idebar.HomeSidebarClosed.stories.storyshot |  2 +-
 ...r.InClusterSidebarClosed.stories.storyshot |  2 +-
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
index eb49452918..8f1552e469 100644
--- a/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -275,6 +275,9 @@ export const PureSidebar = memo(
     linkArea,
   }: PureSidebarProps) => {
     const { t } = useTranslation();
+    const listContainerRef = React.useRef<HTMLDivElement | null>(null);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const adjustedDrawerWidthClosed = isOverflowing ? 84 : 72;
     const temporarySideBarOpen = open === true && isTemporaryDrawer && openUserSelected === true;
 
     // The large sidebar does not open in medium view (600-960px).
@@ -303,6 +306,7 @@ export const PureSidebar = memo(
           })}
         />
         <Grid
+          ref={listContainerRef}
           sx={{
             height: '100%',
             overflowY: 'auto',
@@ -364,6 +368,23 @@ export const PureSidebar = memo(
         }
       : {};
 
+    React.useEffect(() => {
+      const el = listContainerRef.current;
+      if (!el) {
+        return;
+      }
+
+      const observer = new ResizeObserver(() => {
+        setIsOverflowing(el.scrollHeight > el.clientHeight);
+      });
+
+      observer.observe(el);
+
+      setIsOverflowing(el.scrollHeight > el.clientHeight);
+
+      return () => observer.disconnect();
+    }, [items]);
+
     return (
       <Box component="nav" aria-label={t('translation|Navigation')}>
         <Drawer
@@ -390,16 +411,7 @@ export const PureSidebar = memo(
                 duration: theme.transitions.duration.leavingScreen,
               }),
               overflowX: 'hidden',
-              width: '56px',
-              [theme.breakpoints.down('xs')]: {
-                background: 'initial',
-              },
-              [theme.breakpoints.down('sm')]: {
-                width: theme.spacing(0),
-              },
-              [theme.breakpoints.up('sm')]: {
-                width: '72px',
-              },
+              width: `${adjustedDrawerWidthClosed}px`,
               background: theme.palette.sidebarBg,
             };
 
diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot
index 6d838025cb..d3783e5e4c 100644
--- a/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot
+++ b/frontend/src/components/Sidebar/__snapshots__/Sidebar.HomeSidebarClosed.stories.storyshot
@@ -5,7 +5,7 @@
       class="MuiBox-root css-0"
     >
       <div
-        class="MuiDrawer-root MuiDrawer-docked css-1p9jtjb-MuiDrawer-docked"
+        class="MuiDrawer-root MuiDrawer-docked css-1g0cdoa-MuiDrawer-docked"
       >
         <div
           class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"
diff --git a/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot b/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot
index d6a092d0b2..1c282fa225 100644
--- a/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot
+++ b/frontend/src/components/Sidebar/__snapshots__/Sidebar.InClusterSidebarClosed.stories.storyshot
@@ -5,7 +5,7 @@
       class="MuiBox-root css-0"
     >
       <div
-        class="MuiDrawer-root MuiDrawer-docked css-1p9jtjb-MuiDrawer-docked"
+        class="MuiDrawer-root MuiDrawer-docked css-1g0cdoa-MuiDrawer-docked"
       >
         <div
           class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"