Fixed height issues! Finally!!!

frontend/src/App.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { BrowserRouter as Router } from "react-router-dom";
-import { BackstoryApp } from './NewApp/BackstoryApp';
-
-const App = () => {
-    return (
-        <Router>
-            <BackstoryApp />
-        </Router>
-    );
-};
-
-export default App;

frontend/src/NewApp/Components/BackstoryLayout.tsx

@@ -137,16 +137,17 @@ 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", minHeight: "72px", height: "72px" }} />
+      <Box sx={{ display: "flex", maxHeight: "100%", flex: 1, m: 0, p: 0, flexDirection: "column" }}>
       <Scrollable
         sx={{
           display: "flex",
           flexDirection: "column",
           backgroundColor: "background.default",
-          maxHeight: "calc(100vh - 72px)",
-          minHeight: "calc(100vh - 72px)",
+            maxHeight: "100%",
+            minHeight: "100%",
+            mt: "72px"
         }}
       >
         <BackstoryPageContainer>
@@ -168,7 +169,8 @@ const BackstoryLayout: React.FC<{
         </BackstoryPageContainer>
       </Scrollable>
       <Snack ref={snackRef} />
-    </>
+      </Box>
+    </Box>
   );
 };
 

frontend/src/NewApp/Components/Conversation.css

@@ -9,6 +9,6 @@
   width: 100%;
   margin: 0 auto;
   overflow-y: auto;
-  height: calc(100vh - 72px);
+  height: 100%;
 }
 

frontend/src/NewApp/Components/Header.tsx

@@ -372,7 +372,6 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
   };
 
   return (
-    <Box>
     <StyledAppBar
       position="fixed"
       transparent={transparent}
@@ -438,8 +437,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
         </Toolbar>
       </Container>
         <Beta sx={{ left: "-90px", "& .mobile": { right: "-72px" } }} onClick={() => { navigate('/docs/beta'); }} />
-      </StyledAppBar>
-    </Box>
+    </StyledAppBar>
   );
 };
 

frontend/src/NewApp/Pages/BackstoryAppAnalysisPage.tsx

@@ -10,7 +10,7 @@ import { Box, Typography, Paper, Container } from '@mui/material';
 // BackstoryAnalysisDisplay component
 const BackstoryAppAnalysisPage = () => {
   return (
-    <Box sx={{ backgroundColor: 'background.default', minHeight: '100vh', py: 4 }}>
+    <Box sx={{ backgroundColor: 'background.default', minHeight: '100%', py: 4 }}>
       <Container maxWidth="lg">
         <Paper sx={{ p: 4, boxShadow: 2 }}>
           <Typography variant="h1" component="h1" sx={{ mb: 3, color: 'primary.main' }}>

frontend/src/NewApp/Pages/BackstoryThemeVisualizerPage.tsx

@@ -16,7 +16,7 @@ const BackstoryThemeVisualizerPage = () => {
   );
 
   return (
-    <Box sx={{ backgroundColor: 'background.default', minHeight: '100vh', py: 4 }}>
+    <Box sx={{ backgroundColor: 'background.default', minHeight: '100%', py: 4 }}>
       <Container maxWidth="lg">
         <Paper sx={{ p: 4, boxShadow: 2 }}>
 

frontend/src/NewApp/Pages/BetaPage.tsx

@@ -84,7 +84,7 @@ const BetaPage: React.FC<BetaPageProps> = ({
   return (
     <Box
       sx={{
-        minHeight: 'calc(100vh-72px)',
+        minHeight: '100%',
         position: 'relative',
         overflow: 'hidden',
         bgcolor: theme.palette.background.default,

frontend/src/NewApp/Pages/MockupPage.tsx

@@ -34,7 +34,7 @@ const MockupPage = () => {
   ];
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', bgcolor: 'background.default' }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', bgcolor: 'background.default' }}>
       {/* Header */}
       <AppBar position="static" color="default" elevation={1} sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 2, py: 1 }}>

frontend/src/Pages/AboutPage.tsx

@@ -61,7 +61,7 @@ const AboutPage = (props: BackstoryPageProps) => {
     autoscroll={false}
     sx={{
       maxWidth: "1024px",
-      height: "calc(100vh - 72px)",
+      height: "100%",
       flexDirection: "column",
       margin: "0 auto",
       p: 1,

frontend/src/Pages/ResumeBuilderPage.tsx

@@ -374,9 +374,9 @@ See [About > Resume Generation Architecture](/about/resume-generation) for more
         display: 'flex', flexDirection: 'column', flexGrow: 1, p: 0, width: "100%", ...sx,
         overflow: "hidden"
       }}>
-        <Box sx={{ display: activeTab === 0 ? "flex" : "none" }}>{renderJobDescriptionView(/*{ height: "calc(100vh - 72px - 48px)" }*/)}</Box>
-        <Box sx={{ display: activeTab === 1 ? "flex" : "none" }}>{renderResumeView(/*{ height: "calc(100vh - 72px - 48px)" }*/)}</Box>
-        <Box sx={{ display: activeTab === 2 ? "flex" : "none" }}>{renderFactCheckView(/*{ height: "calc(100vh - 72px - 48px)" }*/)}</Box>
+        <Box sx={{ display: activeTab === 0 ? "flex" : "none" }}>{renderJobDescriptionView(/*{ height: "calc(100% - 72px - 48px)" }*/)}</Box>
+        <Box sx={{ display: activeTab === 1 ? "flex" : "none" }}>{renderResumeView(/*{ height: "calc(100% - 72px - 48px)" }*/)}</Box>
+        <Box sx={{ display: activeTab === 2 ? "flex" : "none" }}>{renderFactCheckView(/*{ height: "calc(100% - 72px - 48px)" }*/)}</Box>
       </Box>
     </Box>
   );

frontend/src/index.css

@@ -6,7 +6,8 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   padding: 0;
-  height: 100dvh;
+  box-sizing: border-box;
+  height: 100dvh; /* 100dvh is 100% of the dynamic viewport height—excluding the address bar and other browser UI. */
   overflow: hidden;
   min-width: 300px;
 }
@@ -15,3 +16,19 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+#root {
+  overflow: hidden;
+  height: 100%;
+  min-height: 100%; /* Now everything is sized to 100% being the full 100dvh height of the body */
+  max-height: 100%;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+}
+
+div {
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}

frontend/src/index.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { ThemeProvider } from '@mui/material/styles';
 import { backstoryTheme } from './BackstoryTheme';
+import { BrowserRouter as Router } from "react-router-dom";
+import { BackstoryApp } from './NewApp/BackstoryApp';
 import './index.css';
-import App from './App';
+import { ViewHeadline } from '@mui/icons-material';
+import Box from '@mui/material/Box';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
 root.render(
   <React.StrictMode>
     <ThemeProvider theme={backstoryTheme}>
-      <App />
+      <Router>
+        <BackstoryApp />
+      </Router>
     </ThemeProvider>
   </React.StrictMode>
 );