From 062eccb3795d77a808629bd2b2ba2e3be27053ba Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Thu, 22 May 2025 11:45:49 -0700
Subject: [PATCH] Fixed height issues! Finally!!!

---
 frontend/src/NewApp/BackstoryApp.tsx          |  1 -
 .../src/NewApp/Components/BackstoryLayout.tsx | 30 +++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/NewApp/BackstoryApp.tsx b/frontend/src/NewApp/BackstoryApp.tsx
index 90575f3..e34a5a8 100644
--- a/frontend/src/NewApp/BackstoryApp.tsx
+++ b/frontend/src/NewApp/BackstoryApp.tsx
@@ -152,7 +152,6 @@ const BackstoryApp = () => {
                     />
                 </Routes>
             </UserProvider>
-
         </ThemeProvider>
     );
   
diff --git a/frontend/src/NewApp/Components/BackstoryLayout.tsx b/frontend/src/NewApp/Components/BackstoryLayout.tsx
index fb4720c..a95b585 100644
--- a/frontend/src/NewApp/Components/BackstoryLayout.tsx
+++ b/frontend/src/NewApp/Components/BackstoryLayout.tsx
@@ -94,7 +94,15 @@ interface BackstoryPageContainerProps {
 const BackstoryPageContainer = (props : BackstoryPageContainerProps) => {
     const { children, sx } = props;
     return (
-        <Container maxWidth="xl" sx={{ mt: 2, mb: 2, ...sx }}>
+      <Container
+        className="BackstoryPageContainer"
+        maxWidth="xl"
+        sx={{
+          pt: 1,
+          pb: 1,
+          flexGrow: 1,
+          ...sx
+        }}>
             <Paper
                 elevation={2}
                 sx={{
@@ -139,15 +147,27 @@ const BackstoryLayout: React.FC<{
   return (
     <Box sx={{ height: "100%", maxHeight: "100%", minHeight: "100%", flexDirection: "column" }}>
       <Header  {...{ setSnack, sessionId, user, currentPath: page, navigate, navigationLinks }} />
-      <Box sx={{ display: "flex", maxHeight: "100%", flex: 1, m: 0, p: 0, flexDirection: "column" }}>
+      <Box sx={{
+        display: "flex",
+        width: "100%",
+        maxHeight: "100%",
+        minHeight: "100%",
+        flex: 1,
+        m: 0,
+        p: 0,
+        flexDirection: "column",
+        backgroundColor: "#D3CDBF", /* Warm Gray */
+      }}>
       <Scrollable
+          className="BackstoryPageScrollable"
         sx={{
           display: "flex",
           flexDirection: "column",
           backgroundColor: "background.default",
-            maxHeight: "100%",
-            minHeight: "100%",
-            mt: "72px"
+          height: "100%",
+          maxHeight: "100%",
+          minHeight: "100%",
+          mt: "72px" /* Needs to be kept in sync with the height of Header if the Header theme changes */
         }}
       >
         <BackstoryPageContainer>