From 09a7117c2997f7382a39f36d752e98712fc214ed Mon Sep 17 00:00:00 2001 From: Evangelos Skopelitis 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 --- 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 529db8ab55..532721eb2e 100644 --- a/frontend/src/components/Sidebar/Sidebar.tsx +++ b/frontend/src/components/Sidebar/Sidebar.tsx @@ -278,6 +278,7 @@ export const PureSidebar = memo(
Date: Thu, 19 Dec 2024 17:57:28 -0500 Subject: [PATCH 2/4] frontend: themes: Set fixed toolbar height Signed-off-by: Evangelos Skopelitis --- 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 ac9fd90c37277f82d169808638488e836dcd8236 Mon Sep 17 00:00:00 2001 From: Evangelos Skopelitis 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 --- frontend/src/components/App/Layout.tsx | 21 ++++++++++++++++--- .../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, 23 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/App/Layout.tsx b/frontend/src/components/App/Layout.tsx index 5be1c59afa..6d6d77502a 100644 --- a/frontend/src/components/App/Layout.tsx +++ b/frontend/src/components/App/Layout.tsx @@ -202,12 +202,27 @@ export default function Layout({}: LayoutProps) { > {t('Skip to main content')} - + -
+
{allClusters && !!clusterInURL && !Object.keys(allClusters).includes(getCluster() || '') ? ( @@ -217,7 +232,7 @@ export default function Layout({}: LayoutProps) { )} -
+
{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" >
Date: Fri, 20 Dec 2024 16:12:10 -0500 Subject: [PATCH 4/4] frontend: Sidebar: Resize sidebar when overflowing Signed-off-by: Evangelos Skopelitis --- 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 532721eb2e..ec9e2bb0f0 100644 --- a/frontend/src/components/Sidebar/Sidebar.tsx +++ b/frontend/src/components/Sidebar/Sidebar.tsx @@ -248,6 +248,9 @@ export const PureSidebar = memo( linkArea, }: PureSidebarProps) => { const { t } = useTranslation(); + const listContainerRef = React.useRef(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). @@ -276,6 +279,7 @@ export const PureSidebar = memo( })} /> { + 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 (