From e6b0c4fdb5461f5ac9b7589be2a2fa54aa631063 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 3 Jun 2024 08:52:03 +0200
Subject: [PATCH] fix: Prevent jumping content navbar switch (#7232)

---
 .../MainLayout/NavigationSidebar/NavigationList.tsx      | 9 +++++++--
 .../MainLayout/NavigationSidebar/NavigationSidebar.tsx   | 3 ++-
 .../layout/MainLayout/NavigationSidebar/ShowHide.tsx     | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
index 49ed0dfedb..decf8fbf58 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
@@ -238,7 +238,12 @@ export const RecentProjectsNavigation: FC<{
         <Box>
             {mode === 'full' && (
                 <Typography
-                    sx={{ fontWeight: 'bold', fontSize: 'small', mb: 1, ml: 2 }}
+                    sx={{
+                        fontWeight: 'bold',
+                        fontSize: 'small',
+                        ml: 2,
+                        mt: 1.5,
+                    }}
                 >
                     Recent project
                 </Typography>
@@ -261,7 +266,7 @@ export const RecentFlagsNavigation: FC<{
         <Box>
             {mode === 'full' && (
                 <Typography
-                    sx={{ fontWeight: 'bold', fontSize: 'small', mb: 1, ml: 2 }}
+                    sx={{ fontWeight: 'bold', fontSize: 'small', ml: 2 }}
                 >
                     Recent flags
                 </Typography>
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
index e35eaad4bd..869cffea7e 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@@ -45,8 +45,9 @@ export const StretchContainer = styled(Box)(({ theme }) => ({
     alignSelf: 'stretch',
     display: 'flex',
     flexDirection: 'column',
-    gap: theme.spacing(3),
+    gap: theme.spacing(2),
     zIndex: 1,
+    overflowAnchor: 'none',
 }));
 
 export const NavigationSidebar = () => {
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
index 06ae806eaf..b3cc6e4d68 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
@@ -11,7 +11,7 @@ const ShowHideRow = styled(Box, {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: theme.spacing(2, 1, 0, mode === 'mini' ? 1.5 : 2),
+    padding: theme.spacing(0, 1, 0, mode === 'mini' ? 1.5 : 2),
     cursor: 'pointer',
     position: 'sticky',
     bottom: theme.spacing(2),