refactor(site): remove as many 100vh units as possible(#9272)

site/src/components/Dashboard/DashboardLayout.tsx

@@ -12,7 +12,7 @@ import { updateCheckMachine } from "xServices/updateCheck/updateCheckXService"
 import { Navbar } from "../Navbar/Navbar"
 import Snackbar from "@mui/material/Snackbar"
 import Link from "@mui/material/Link"
-import Box from "@mui/material/Box"
+import Box, { BoxProps } from "@mui/material/Box"
 import InfoOutlined from "@mui/icons-material/InfoOutlined"
 import Button from "@mui/material/Button"
 import { docs } from "utils/docs"
@@ -102,10 +102,27 @@ export const DashboardLayout: FC = () => {
   )
 }
 
+export const DashboardFullPage = (props: BoxProps) => {
+  return (
+    <Box
+      {...props}
+      sx={{
+        ...props.sx,
+        marginBottom: `-${dashboardContentBottomPadding}px`,
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        flexBasis: 0,
+        minHeight: "100%",
+      }}
+    />
+  )
+}
+
 const useStyles = makeStyles({
   site: {
     display: "flex",
-    minHeight: "100vh",
+    minHeight: "100%",
     flexDirection: "column",
   },
   siteContent: {

site/src/components/RuntimeErrorState/RuntimeErrorState.tsx

@@ -140,7 +140,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    minHeight: "100vh",
+    minHeight: "100%",
     maxWidth: theme.spacing(75),
   },
 

site/src/components/SignInLayout/SignInLayout.tsx

@@ -2,12 +2,6 @@ import { makeStyles } from "@mui/styles"
 import { FC, ReactNode } from "react"
 
 export const useStyles = makeStyles((theme) => ({
-  "@global": {
-    // Necessary for when this is on lonely pages!
-    "html, body, #root, #storybook-root": {
-      height: "100vh",
-    },
-  },
   root: {
     flex: 1,
     height: "-webkit-fill-available",

site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx

@@ -18,12 +18,10 @@ import { Link as RouterLink } from "react-router-dom"
 import { Alert, AlertDetail } from "components/Alert/Alert"
 import { Avatar } from "components/Avatar/Avatar"
 import { AvatarData } from "components/AvatarData/AvatarData"
-import { bannerHeight } from "components/DeploymentBanner/DeploymentBannerView"
 import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import { PublishVersionData } from "pages/TemplateVersionPage/TemplateVersionEditorPage/types"
 import { FC, useCallback, useEffect, useRef, useState } from "react"
-import { navHeight, dashboardContentBottomPadding } from "theme/constants"
 import {
   createFile,
   existsFile,
@@ -50,6 +48,7 @@ import {
 } from "./TemplateVersionStatusBadge"
 import { Theme } from "@mui/material/styles"
 import AlertTitle from "@mui/material/AlertTitle"
+import { DashboardFullPage } from "components/Dashboard/DashboardLayout"
 
 export interface TemplateVersionEditorProps {
   template: Template
@@ -185,7 +184,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
   return (
     <>
-      <div className={styles.root}>
+      <DashboardFullPage className={styles.root}>
         <div className={styles.topbar} data-testid="topbar">
           <div className={styles.topbarSides}>
             <Link
@@ -415,7 +414,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
             )}
           </div>
         </div>
-      </div>
+      </DashboardFullPage>
 
       <PublishTemplateVersionDialog
         key={templateVersion.name}
@@ -446,15 +445,7 @@ const useStyles = makeStyles<
   }
 >((theme) => ({
   root: {
-    height: (props) =>
-      `calc(100vh - ${
-        navHeight + (props.deploymentBannerVisible ? bannerHeight : 0)
-      }px)`,
     background: theme.palette.background.default,
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    marginBottom: -dashboardContentBottomPadding, // Remove dashboard bottom padding
   },
   topbar: {
     padding: theme.spacing(2),
@@ -478,6 +469,7 @@ const useStyles = makeStyles<
   sidebarAndEditor: {
     display: "flex",
     flex: 1,
+    flexBasis: 0,
   },
   sidebar: {
     minWidth: 256,
@@ -505,7 +497,7 @@ const useStyles = makeStyles<
     width: "100%",
     gridTemplateColumns: (props) =>
       props.showBuildLogs ? "1fr 1fr" : "1fr 0fr",
-    height: `calc(100vh - ${navHeight + topbarHeight}px)`,
+    minHeight: "100%",
     overflow: "hidden",
   },
   editor: {

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

@@ -17,8 +17,8 @@ export const NotFoundPage: FC = () => {
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    width: "100vw",
-    height: "100vh",
+    width: "100%",
+    height: "100%",
     display: "flex",
     flexDirection: "row",
     justifyContent: "center",

site/src/pages/HealthPage/HealthPage.tsx

@@ -18,6 +18,7 @@ import {
 import { Stats, StatsItem } from "components/Stats/Stats"
 import { makeStyles } from "@mui/styles"
 import { createDayString } from "utils/createDayString"
+import { DashboardFullPage } from "components/Dashboard/DashboardLayout"
 
 const sections = {
   derp: "DERP",
@@ -59,14 +60,7 @@ export function HealthPageView({
   const styles = useStyles()
 
   return (
-    <Box
-      sx={{
-        height: "calc(100vh - 62px - 36px)",
-        overflow: "hidden",
-        // Remove padding added from dashboard layout (.siteContent)
-        marginBottom: "-48px",
-      }}
-    >
+    <DashboardFullPage>
       <FullWidthPageHeader sticky={false}>
         <Stack direction="row" spacing={2} alignItems="center">
           {healthStatus.healthy ? (
@@ -115,8 +109,9 @@ export function HealthPageView({
       <Box
         sx={{
           display: "flex",
-          alignItems: "start",
-          height: "100%",
+          flexBasis: 0,
+          flex: 1,
+          overflow: "hidden",
         }}
       >
         <Box
@@ -124,7 +119,6 @@ export function HealthPageView({
             width: (theme) => theme.spacing(32),
             flexShrink: 0,
             borderRight: (theme) => `1px solid ${theme.palette.divider}`,
-            height: "100%",
           }}
         >
           <Box
@@ -202,7 +196,7 @@ export function HealthPageView({
           </Box>
         </Box>
         {/* 62px - navbar and 36px - the bottom bar */}
-        <Box sx={{ height: "100%", overflowY: "auto", width: "100%" }}>
+        <Box sx={{ overflowY: "auto", width: "100%" }}>
           <SyntaxHighlighter
             language="json"
             editorProps={{ height: "100%" }}
@@ -214,7 +208,7 @@ export function HealthPageView({
           />
         </Box>
       </Box>
-    </Box>
+    </DashboardFullPage>
   )
 }
 

site/src/pages/LoginPage/LoginPageView.tsx

@@ -57,7 +57,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    minHeight: "100vh",
+    minHeight: "100%",
     textAlign: "center",
   },
 

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

@@ -142,9 +142,9 @@ export const TemplateEmbedPageView: FC<{
           <Box
             display="flex"
             height={{
-              // 80px is the vertical padding of the content area
-              // 36px is from the status bar from the bottom
-              md: "calc(100vh - (80px + 36px))",
+              // 80px for padding, 36px is for the status bar. We want to use `vh`
+              // so that it will be relative to the screen and not the parent layout.
+              height: "calc(100vh - (80px + 36px))",
               top: 40,
               position: "sticky",
             }}

site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx

@@ -8,7 +8,6 @@ import { WorkspaceBuildPageView } from "./WorkspaceBuildPageView"
 import { useQuery } from "@tanstack/react-query"
 import { getWorkspaceBuilds } from "api/api"
 import dayjs from "dayjs"
-import { usePermissions } from "hooks"
 
 export const WorkspaceBuildPage: FC = () => {
   const params = useParams() as {
@@ -33,7 +32,6 @@ export const WorkspaceBuildPage: FC = () => {
     },
     enabled: Boolean(build),
   })
-  const permissions = usePermissions()
 
   useEffect(() => {
     send("RESET", { buildNumber, timeCursor: new Date() })
@@ -56,7 +54,6 @@ export const WorkspaceBuildPage: FC = () => {
         build={build}
         builds={builds}
         activeBuildNumber={buildNumber}
-        hasDeploymentBanner={permissions.viewDeploymentStats}
       />
     </>
   )

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

@@ -20,7 +20,6 @@ const meta: Meta<typeof WorkspaceBuildPageView> = {
     logs: MockWorkspaceBuildLogs,
     builds: defaultBuilds,
     activeBuildNumber: defaultBuilds[0].build_number,
-    hasDeploymentBanner: false,
   },
 }
 

site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx

@@ -26,6 +26,7 @@ import {
 import { BuildIcon } from "components/BuildIcon/BuildIcon"
 import Skeleton from "@mui/material/Skeleton"
 import { Alert } from "components/Alert/Alert"
+import { DashboardFullPage } from "components/Dashboard/DashboardLayout"
 
 const sortLogsByCreatedAt = (logs: ProvisionerJobLog[]) => {
   return [...logs].sort(
@@ -39,7 +40,6 @@ export interface WorkspaceBuildPageViewProps {
   build: WorkspaceBuild | undefined
   builds: WorkspaceBuild[] | undefined
   activeBuildNumber: number
-  hasDeploymentBanner: boolean
 }
 
 export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
@@ -47,31 +47,15 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
   build,
   builds,
   activeBuildNumber,
-  hasDeploymentBanner,
 }) => {
   const styles = useStyles()
-  const navbarHeight = 62
-  const deploymentBannerHeight = 48
-  const heightOffset = hasDeploymentBanner
-    ? navbarHeight + deploymentBannerHeight
-    : navbarHeight
 
   if (!build) {
     return <Loader />
   }
 
   return (
-    <Box
-      sx={{
-        // 62px is the navbar height
-        height: `calc(100vh - ${heightOffset}px)`,
-        overflow: "hidden",
-        // Remove padding added from dashboard layout (.siteContent)
-        marginBottom: "-48px",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
+    <DashboardFullPage>
       <FullWidthPageHeader sticky={false}>
         <Stack direction="row" alignItems="center" spacing={3}>
           <BuildAvatar build={build} />
@@ -126,6 +110,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
           alignItems: "start",
           overflow: "hidden",
           flex: 1,
+          flexBasis: 0,
         }}
       >
         <Sidebar>
@@ -184,7 +169,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
           )}
         </Box>
       </Box>
-    </Box>
+    </DashboardFullPage>
   )
 }
 

site/src/theme/theme.ts

@@ -86,6 +86,10 @@ dark = createTheme(dark, {
   components: {
     MuiCssBaseline: {
       styleOverrides: `
+        html, body, #root, #storybook-root {
+          height: 100%;
+        }
+
         input:-webkit-autofill,
         input:-webkit-autofill:hover,
         input:-webkit-autofill:focus,