Fixed height issues! Finally!!!

frontend/src/NewApp/BackstoryApp.tsx

@@ -152,7 +152,6 @@ const BackstoryApp = () => {
                     />
                 </Routes>
             </UserProvider>
-
         </ThemeProvider>
     );
   

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>