From 7cd3936b3ba982e0c8f09ca3497e686b137bea92 Mon Sep 17 00:00:00 2001
From: Kazi <kazinoshin.jo@gmail.com>
Date: Sun, 2 Jun 2024 15:28:04 +0600
Subject: [PATCH] Fix styles when scrolling in dark mode

---
 urbackupserver/www2/src/App.tsx               | 22 +++++++++++++++----
 .../www2/src/components/StackStyles.tsx       |  5 ++---
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/urbackupserver/www2/src/App.tsx b/urbackupserver/www2/src/App.tsx
index 6753f9c5..518ec465 100644
--- a/urbackupserver/www2/src/App.tsx
+++ b/urbackupserver/www2/src/App.tsx
@@ -159,7 +159,7 @@ const App: React.FunctionComponent = () => {
   const styles = useStackStyles();
 
   return (
-    <FluentProvider theme={selectedTheme} style={{ height: "100%" }}>
+    <FluentProvider theme={selectedTheme}>
       <React.StrictMode>
         <I18nProvider i18n={i18n}>
           <QueryClientProvider client={queryClient}>
@@ -167,12 +167,26 @@ const App: React.FunctionComponent = () => {
               <div className={styles.item}>
                 <HeaderBar />
               </div>
-              <div className={styles.itemGrow}>
-                <div className={styles.stackHorizontal}>
+              <div
+                className={styles.itemGrow}
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
+                <div
+                  className={styles.stackHorizontal}
+                  style={{
+                    flex: 1,
+                  }}
+                >
                   {snap.loggedIn && (
                     <div
                       className={styles.item}
-                      style={{ borderRight: "1px solid", padding: "10pt" }}
+                      style={{
+                        borderRight: "1px solid",
+                        padding: "10pt",
+                      }}
                     >
                       <NavSidebar />
                     </div>
diff --git a/urbackupserver/www2/src/components/StackStyles.tsx b/urbackupserver/www2/src/components/StackStyles.tsx
index abf3984d..27ea58e4 100644
--- a/urbackupserver/www2/src/components/StackStyles.tsx
+++ b/urbackupserver/www2/src/components/StackStyles.tsx
@@ -6,7 +6,7 @@ export const useStackStyles = makeStyles({
     flexDirection: "column",
     flexWrap: "nowrap",
     width: "auto",
-    height: "100%",
+    minHeight: "100vh",
     boxSizing: "border-box",
     "> *": {
       textOverflow: "ellipsis",
@@ -43,7 +43,6 @@ export const useStackStyles = makeStyles({
   itemGrow: {
     height: "auto",
     width: "auto",
-    flexShrink: 1,
-    flexGrow: 1,
+    flex: 1,
   },
 });