Skip to content

Commit 14aa1af

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor(site): remove as many 100vh units as possible(#9272)
1 parent 04d5e3f commit 14aa1af

File tree

12 files changed

+46
-64
lines changed

12 files changed

+46
-64
lines changed

‎site/src/components/Dashboard/DashboardLayout.tsx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { updateCheckMachine } from "xServices/updateCheck/updateCheckXService"
1212
import { Navbar } from "../Navbar/Navbar"
1313
import Snackbar from "@mui/material/Snackbar"
1414
import Link from "@mui/material/Link"
15-
import Box from "@mui/material/Box"
15+
import Box, { BoxProps } from "@mui/material/Box"
1616
import InfoOutlined from "@mui/icons-material/InfoOutlined"
1717
import Button from "@mui/material/Button"
1818
import { docs } from "utils/docs"
@@ -102,10 +102,27 @@ export const DashboardLayout: FC = () => {
102102
)
103103
}
104104

105+
export const DashboardFullPage = (props: BoxProps) => {
106+
return (
107+
<Box
108+
{...props}
109+
sx={{
110+
...props.sx,
111+
marginBottom: `-${dashboardContentBottomPadding}px`,
112+
flex: 1,
113+
display: "flex",
114+
flexDirection: "column",
115+
flexBasis: 0,
116+
minHeight: "100%",
117+
}}
118+
/>
119+
)
120+
}
121+
105122
const useStyles = makeStyles({
106123
site: {
107124
display: "flex",
108-
minHeight: "100vh",
125+
minHeight: "100%",
109126
flexDirection: "column",
110127
},
111128
siteContent: {

‎site/src/components/RuntimeErrorState/RuntimeErrorState.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ const useStyles = makeStyles((theme) => ({
140140
display: "flex",
141141
alignItems: "center",
142142
justifyContent: "center",
143-
minHeight: "100vh",
143+
minHeight: "100%",
144144
maxWidth: theme.spacing(75),
145145
},
146146

‎site/src/components/SignInLayout/SignInLayout.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,6 @@ import { makeStyles } from "@mui/styles"
22
import { FC, ReactNode } from "react"
33

44
export const useStyles = makeStyles((theme) => ({
5-
"@global": {
6-
// Necessary for when this is on lonely pages!
7-
"html, body, #root, #storybook-root": {
8-
height: "100vh",
9-
},
10-
},
115
root: {
126
flex: 1,
137
height: "-webkit-fill-available",

‎site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,10 @@ import { Link as RouterLink } from "react-router-dom"
1818
import { Alert, AlertDetail } from "components/Alert/Alert"
1919
import { Avatar } from "components/Avatar/Avatar"
2020
import { AvatarData } from "components/AvatarData/AvatarData"
21-
import { bannerHeight } from "components/DeploymentBanner/DeploymentBannerView"
2221
import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable"
2322
import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
2423
import { PublishVersionData } from "pages/TemplateVersionPage/TemplateVersionEditorPage/types"
2524
import { FC, useCallback, useEffect, useRef, useState } from "react"
26-
import { navHeight, dashboardContentBottomPadding } from "theme/constants"
2725
import {
2826
createFile,
2927
existsFile,
@@ -50,6 +48,7 @@ import {
5048
} from "./TemplateVersionStatusBadge"
5149
import { Theme } from "@mui/material/styles"
5250
import AlertTitle from "@mui/material/AlertTitle"
51+
import { DashboardFullPage } from "components/Dashboard/DashboardLayout"
5352

5453
export interface TemplateVersionEditorProps {
5554
template: Template
@@ -185,7 +184,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
185184

186185
return (
187186
<>
188-
<div className={styles.root}>
187+
<DashboardFullPage className={styles.root}>
189188
<div className={styles.topbar} data-testid="topbar">
190189
<div className={styles.topbarSides}>
191190
<Link
@@ -415,7 +414,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
415414
)}
416415
</div>
417416
</div>
418-
</div>
417+
</DashboardFullPage>
419418

420419
<PublishTemplateVersionDialog
421420
key={templateVersion.name}
@@ -446,15 +445,7 @@ const useStyles = makeStyles<
446445
}
447446
>((theme) => ({
448447
root: {
449-
height: (props) =>
450-
`calc(100vh - ${
451-
navHeight + (props.deploymentBannerVisible ? bannerHeight : 0)
452-
}px)`,
453448
background: theme.palette.background.default,
454-
flex: 1,
455-
display: "flex",
456-
flexDirection: "column",
457-
marginBottom: -dashboardContentBottomPadding, // Remove dashboard bottom padding
458449
},
459450
topbar: {
460451
padding: theme.spacing(2),
@@ -478,6 +469,7 @@ const useStyles = makeStyles<
478469
sidebarAndEditor: {
479470
display: "flex",
480471
flex: 1,
472+
flexBasis: 0,
481473
},
482474
sidebar: {
483475
minWidth: 256,
@@ -505,7 +497,7 @@ const useStyles = makeStyles<
505497
width: "100%",
506498
gridTemplateColumns: (props) =>
507499
props.showBuildLogs ? "1fr 1fr" : "1fr 0fr",
508-
height: `calc(100vh - ${navHeight + topbarHeight}px)`,
500+
minHeight: "100%",
509501
overflow: "hidden",
510502
},
511503
editor: {

‎site/src/pages/404Page/404Page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ export const NotFoundPage: FC = () => {
1717

1818
const useStyles = makeStyles((theme) => ({
1919
root: {
20-
width: "100vw",
21-
height: "100vh",
20+
width: "100%",
21+
height: "100%",
2222
display: "flex",
2323
flexDirection: "row",
2424
justifyContent: "center",

‎site/src/pages/HealthPage/HealthPage.tsx

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
import { Stats, StatsItem } from "components/Stats/Stats"
1919
import { makeStyles } from "@mui/styles"
2020
import { createDayString } from "utils/createDayString"
21+
import { DashboardFullPage } from "components/Dashboard/DashboardLayout"
2122

2223
const sections = {
2324
derp: "DERP",
@@ -59,14 +60,7 @@ export function HealthPageView({
5960
const styles = useStyles()
6061

6162
return (
62-
<Box
63-
sx={{
64-
height: "calc(100vh - 62px - 36px)",
65-
overflow: "hidden",
66-
// Remove padding added from dashboard layout (.siteContent)
67-
marginBottom: "-48px",
68-
}}
69-
>
63+
<DashboardFullPage>
7064
<FullWidthPageHeader sticky={false}>
7165
<Stack direction="row" spacing={2} alignItems="center">
7266
{healthStatus.healthy ? (
@@ -115,16 +109,16 @@ export function HealthPageView({
115109
<Box
116110
sx={{
117111
display: "flex",
118-
alignItems: "start",
119-
height: "100%",
112+
flexBasis: 0,
113+
flex: 1,
114+
overflow: "hidden",
120115
}}
121116
>
122117
<Box
123118
sx={{
124119
width: (theme) => theme.spacing(32),
125120
flexShrink: 0,
126121
borderRight: (theme) => `1px solid ${theme.palette.divider}`,
127-
height: "100%",
128122
}}
129123
>
130124
<Box
@@ -202,7 +196,7 @@ export function HealthPageView({
202196
</Box>
203197
</Box>
204198
{/* 62px - navbar and 36px - the bottom bar */}
205-
<Box sx={{ height: "100%", overflowY: "auto", width: "100%" }}>
199+
<Box sx={{ overflowY: "auto", width: "100%" }}>
206200
<SyntaxHighlighter
207201
language="json"
208202
editorProps={{ height: "100%" }}
@@ -214,7 +208,7 @@ export function HealthPageView({
214208
/>
215209
</Box>
216210
</Box>
217-
</Box>
211+
</DashboardFullPage>
218212
)
219213
}
220214

‎site/src/pages/LoginPage/LoginPageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const useStyles = makeStyles((theme) => ({
5757
display: "flex",
5858
alignItems: "center",
5959
justifyContent: "center",
60-
minHeight: "100vh",
60+
minHeight: "100%",
6161
textAlign: "center",
6262
},
6363

‎site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,9 @@ export const TemplateEmbedPageView: FC<{
142142
<Box
143143
display="flex"
144144
height={{
145-
// 80px is the vertical padding of the content area
146-
// 36px is from the status bar from the bottom
147-
md: "calc(100vh - (80px + 36px))",
145+
// 80px for padding, 36px is for the status bar. We want to use `vh`
146+
// so that it will be relative to the screen and not the parent layout.
147+
height: "calc(100vh - (80px + 36px))",
148148
top: 40,
149149
position: "sticky",
150150
}}

‎site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { WorkspaceBuildPageView } from "./WorkspaceBuildPageView"
88
import { useQuery } from "@tanstack/react-query"
99
import { getWorkspaceBuilds } from "api/api"
1010
import dayjs from "dayjs"
11-
import { usePermissions } from "hooks"
1211

1312
export const WorkspaceBuildPage: FC = () => {
1413
const params = useParams() as {
@@ -33,7 +32,6 @@ export const WorkspaceBuildPage: FC = () => {
3332
},
3433
enabled: Boolean(build),
3534
})
36-
const permissions = usePermissions()
3735

3836
useEffect(() => {
3937
send("RESET", { buildNumber, timeCursor: new Date() })
@@ -56,7 +54,6 @@ export const WorkspaceBuildPage: FC = () => {
5654
build={build}
5755
builds={builds}
5856
activeBuildNumber={buildNumber}
59-
hasDeploymentBanner={permissions.viewDeploymentStats}
6057
/>
6158
</>
6259
)

‎site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ const meta: Meta<typeof WorkspaceBuildPageView> = {
2020
logs: MockWorkspaceBuildLogs,
2121
builds: defaultBuilds,
2222
activeBuildNumber: defaultBuilds[0].build_number,
23-
hasDeploymentBanner: false,
2423
},
2524
}
2625

‎site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
import { BuildIcon } from "components/BuildIcon/BuildIcon"
2727
import Skeleton from "@mui/material/Skeleton"
2828
import { Alert } from "components/Alert/Alert"
29+
import { DashboardFullPage } from "components/Dashboard/DashboardLayout"
2930

3031
const sortLogsByCreatedAt = (logs: ProvisionerJobLog[]) => {
3132
return [...logs].sort(
@@ -39,39 +40,22 @@ export interface WorkspaceBuildPageViewProps {
3940
build: WorkspaceBuild | undefined
4041
builds: WorkspaceBuild[] | undefined
4142
activeBuildNumber: number
42-
hasDeploymentBanner: boolean
4343
}
4444

4545
export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
4646
logs,
4747
build,
4848
builds,
4949
activeBuildNumber,
50-
hasDeploymentBanner,
5150
}) => {
5251
const styles = useStyles()
53-
const navbarHeight = 62
54-
const deploymentBannerHeight = 48
55-
const heightOffset = hasDeploymentBanner
56-
? navbarHeight + deploymentBannerHeight
57-
: navbarHeight
5852

5953
if (!build) {
6054
return <Loader />
6155
}
6256

6357
return (
64-
<Box
65-
sx={{
66-
// 62px is the navbar height
67-
height: `calc(100vh - ${heightOffset}px)`,
68-
overflow: "hidden",
69-
// Remove padding added from dashboard layout (.siteContent)
70-
marginBottom: "-48px",
71-
display: "flex",
72-
flexDirection: "column",
73-
}}
74-
>
58+
<DashboardFullPage>
7559
<FullWidthPageHeader sticky={false}>
7660
<Stack direction="row" alignItems="center" spacing={3}>
7761
<BuildAvatar build={build} />
@@ -126,6 +110,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
126110
alignItems: "start",
127111
overflow: "hidden",
128112
flex: 1,
113+
flexBasis: 0,
129114
}}
130115
>
131116
<Sidebar>
@@ -184,7 +169,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
184169
)}
185170
</Box>
186171
</Box>
187-
</Box>
172+
</DashboardFullPage>
188173
)
189174
}
190175

‎site/src/theme/theme.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,10 @@ dark = createTheme(dark, {
8686
components: {
8787
MuiCssBaseline: {
8888
styleOverrides: `
89+
html, body, #root, #storybook-root {
90+
height: 100%;
91+
}
92+
8993
input:-webkit-autofill,
9094
input:-webkit-autofill:hover,
9195
input:-webkit-autofill:focus,

0 commit comments

Comments
 (0)