Skip to content

Commit 43fa469

Browse files
BrunoQuaresmaBrunoQuaresma
committed
refactor(site): remove 100vh units as possible
1 parent f35423c commit 43fa469

File tree

12 files changed

+39
-54
lines changed

12 files changed

+39
-54
lines changed

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

Lines changed: 18 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,26 @@ 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+
}}
117+
/>
118+
)
119+
}
120+
105121
const useStyles = makeStyles({
106122
site: {
107123
display: "flex",
108-
minHeight: "100vh",
124+
minHeight: "100%",
109125
flexDirection: "column",
110126
},
111127
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: 3 additions & 5 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,12 +60,9 @@ export function HealthPageView({
5960
const styles = useStyles()
6061

6162
return (
62-
<Box
63+
<DashboardFullPage
6364
sx={{
64-
height: "calc(100vh - 62px - 36px)",
6565
overflow: "hidden",
66-
// Remove padding added from dashboard layout (.siteContent)
67-
marginBottom: "-48px",
6866
}}
6967
>
7068
<FullWidthPageHeader sticky={false}>
@@ -214,7 +212,7 @@ export function HealthPageView({
214212
/>
215213
</Box>
216214
</Box>
217-
</Box>
215+
</DashboardFullPage>
218216
)
219217
}
220218

‎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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export const TemplateEmbedPageView: FC<{
144144
height={{
145145
// 80px is the vertical padding of the content area
146146
// 36px is from the status bar from the bottom
147-
md: "calc(100vh - (80px + 36px))",
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)