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] 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"