From a9b9472f69777e2ef2b567e30aeb455585f6ebff Mon Sep 17 00:00:00 2001
From: alihamuh <alihamuh@gmail.com>
Date: Mon, 4 Mar 2024 18:59:38 +0500
Subject: [PATCH] web: added a flex to uniform the settings background

---
 apps/web/src/dialogs/settings/index.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/apps/web/src/dialogs/settings/index.tsx b/apps/web/src/dialogs/settings/index.tsx
index 29eecf753..7bb604fb9 100644
--- a/apps/web/src/dialogs/settings/index.tsx
+++ b/apps/web/src/dialogs/settings/index.tsx
@@ -222,6 +222,18 @@ type SettingsSideBarProps = { onNavigate: (settings: SettingsGroup[]) => void };
 function SettingsSideBar(props: SettingsSideBarProps) {
   const { onNavigate } = props;
   const [route, setRoute] = useState<SectionKeys>("profile");
+  const [extraHeight, setExtraHeight] = useState(0);
+
+  useEffect(() => {
+    if (
+      document.getElementById("settings-side-menu")?.scrollHeight !==
+      document.getElementById("settings-nav-menu")?.scrollHeight
+    )
+      setExtraHeight(
+        (document.getElementById("settings-side-menu")?.scrollHeight || 0) -
+          (document.getElementById("settings-nav-menu")?.scrollHeight || 0)
+      );
+  }, []);
 
   return (
     <FlexScrollContainer
@@ -234,6 +246,7 @@ function SettingsSideBar(props: SettingsSideBarProps) {
     >
       <ScopedThemeProvider scope="navigationMenu">
         <Flex
+          id="settings-nav-menu"
           sx={{
             flexDirection: "column",
             display: "flex",
@@ -325,6 +338,14 @@ function SettingsSideBar(props: SettingsSideBarProps) {
               )}
             </Flex>
           ))}
+          <Flex
+            id="test-settings"
+            sx={{
+              display: "flex",
+              flex: 1,
+              minHeight: extraHeight
+            }}
+          ></Flex>
         </Flex>
       </ScopedThemeProvider>
     </FlexScrollContainer>