diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
deleted file mode 100644
index a0045a9..0000000
--- a/frontend/src/App.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { BrowserRouter as Router } from "react-router-dom";
-import { BackstoryApp } from './NewApp/BackstoryApp';
-
-const App = () => {
- return (
-
-
-
- );
-};
-
-export default App;
diff --git a/frontend/src/NewApp/Components/BackstoryLayout.tsx b/frontend/src/NewApp/Components/BackstoryLayout.tsx
index 4573095..fb4720c 100644
--- a/frontend/src/NewApp/Components/BackstoryLayout.tsx
+++ b/frontend/src/NewApp/Components/BackstoryLayout.tsx
@@ -137,16 +137,17 @@ const BackstoryLayout: React.FC<{
}
return (
- <>
+
-
+
@@ -168,7 +169,8 @@ const BackstoryLayout: React.FC<{
-
+
+
);
};
diff --git a/frontend/src/NewApp/Components/Conversation.css b/frontend/src/NewApp/Components/Conversation.css
index 75c7f79..1144a2f 100644
--- a/frontend/src/NewApp/Components/Conversation.css
+++ b/frontend/src/NewApp/Components/Conversation.css
@@ -9,6 +9,6 @@
width: 100%;
margin: 0 auto;
overflow-y: auto;
- height: calc(100vh - 72px);
+ height: 100%;
}
diff --git a/frontend/src/NewApp/Components/Header.tsx b/frontend/src/NewApp/Components/Header.tsx
index e4631e0..8db18df 100644
--- a/frontend/src/NewApp/Components/Header.tsx
+++ b/frontend/src/NewApp/Components/Header.tsx
@@ -372,7 +372,6 @@ const Header: React.FC = (props: HeaderProps) => {
};
return (
-
= (props: HeaderProps) => {
{ navigate('/docs/beta'); }} />
-
-
+
);
};
diff --git a/frontend/src/NewApp/Pages/BackstoryAppAnalysisPage.tsx b/frontend/src/NewApp/Pages/BackstoryAppAnalysisPage.tsx
index 02d9c70..b403774 100644
--- a/frontend/src/NewApp/Pages/BackstoryAppAnalysisPage.tsx
+++ b/frontend/src/NewApp/Pages/BackstoryAppAnalysisPage.tsx
@@ -10,7 +10,7 @@ import { Box, Typography, Paper, Container } from '@mui/material';
// BackstoryAnalysisDisplay component
const BackstoryAppAnalysisPage = () => {
return (
-
+
diff --git a/frontend/src/NewApp/Pages/BackstoryThemeVisualizerPage.tsx b/frontend/src/NewApp/Pages/BackstoryThemeVisualizerPage.tsx
index 6581fd8..33c2f83 100644
--- a/frontend/src/NewApp/Pages/BackstoryThemeVisualizerPage.tsx
+++ b/frontend/src/NewApp/Pages/BackstoryThemeVisualizerPage.tsx
@@ -16,7 +16,7 @@ const BackstoryThemeVisualizerPage = () => {
);
return (
-
+
diff --git a/frontend/src/NewApp/Pages/BetaPage.tsx b/frontend/src/NewApp/Pages/BetaPage.tsx
index e3ed568..c8025dd 100644
--- a/frontend/src/NewApp/Pages/BetaPage.tsx
+++ b/frontend/src/NewApp/Pages/BetaPage.tsx
@@ -84,7 +84,7 @@ const BetaPage: React.FC = ({
return (
{
];
return (
-
+
{/* Header */}
theme.zIndex.drawer + 1 }}>
diff --git a/frontend/src/Pages/AboutPage.tsx b/frontend/src/Pages/AboutPage.tsx
index 055fb05..5ab81fc 100644
--- a/frontend/src/Pages/AboutPage.tsx
+++ b/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,
diff --git a/frontend/src/Pages/ResumeBuilderPage.tsx b/frontend/src/Pages/ResumeBuilderPage.tsx
index f801b64..d6e255d 100644
--- a/frontend/src/Pages/ResumeBuilderPage.tsx
+++ b/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"
}}>
- {renderJobDescriptionView(/*{ height: "calc(100vh - 72px - 48px)" }*/)}
- {renderResumeView(/*{ height: "calc(100vh - 72px - 48px)" }*/)}
- {renderFactCheckView(/*{ height: "calc(100vh - 72px - 48px)" }*/)}
+ {renderJobDescriptionView(/*{ height: "calc(100% - 72px - 48px)" }*/)}
+ {renderResumeView(/*{ height: "calc(100% - 72px - 48px)" }*/)}
+ {renderFactCheckView(/*{ height: "calc(100% - 72px - 48px)" }*/)}
);
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 903d5e8..fbeb9e7 100644
--- a/frontend/src/index.css
+++ b/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;
+}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 326144e..182a3ba 100644
--- a/frontend/src/index.tsx
+++ b/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(
-
+
+
+
);