Fixed height issues! Finally!!!

This commit is contained in:
James Ketr 2025-05-22 11:25:34 -07:00
parent 53c2496d55
commit fbf2b42065
12 changed files with 43 additions and 33 deletions

View File

@ -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;

View File

@ -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>
);
};

View File

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

View File

@ -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>
);
};

View File

@ -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' }}>

View File

@ -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 }}>

View File

@ -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,

View File

@ -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 }}>

View File

@ -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,

View File

@ -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>
);

View File

@ -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;
}

View File

@ -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>
);