From 43fa469b57db7d9e7d01c4665a24d1fff9620f68 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 23 Aug 2023 14:01:09 +0000
Subject: [PATCH 1/6] refactor(site): remove 100vh units as possible

---
 .../components/Dashboard/DashboardLayout.tsx  | 20 ++++++++++++++--
 .../RuntimeErrorState/RuntimeErrorState.tsx   |  2 +-
 .../components/SignInLayout/SignInLayout.tsx  |  6 -----
 .../TemplateVersionEditor.tsx                 | 18 ++++-----------
 site/src/pages/404Page/404Page.tsx            |  4 ++--
 site/src/pages/HealthPage/HealthPage.tsx      |  8 +++----
 site/src/pages/LoginPage/LoginPageView.tsx    |  2 +-
 .../TemplateEmbedPage/TemplateEmbedPage.tsx   |  2 +-
 .../WorkspaceBuildPage/WorkspaceBuildPage.tsx |  3 ---
 .../WorkspaceBuildPageView.stories.tsx        |  1 -
 .../WorkspaceBuildPageView.tsx                | 23 ++++---------------
 site/src/theme/theme.ts                       |  4 ++++
 12 files changed, 39 insertions(+), 54 deletions(-)

diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
index e7f01c9e3a161..a508f8bff0711 100644
--- a/site/src/components/Dashboard/DashboardLayout.tsx
+++ b/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,26 @@ 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,
+      }}
+    />
+  )
+}
+
 const useStyles = makeStyles({
   site: {
     display: "flex",
-    minHeight: "100vh",
+    minHeight: "100%",
     flexDirection: "column",
   },
   siteContent: {
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
index 74174cd8dd983..3d2a0bd6a7945 100644
--- a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
+++ b/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),
   },
 
diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx
index cf223d7d8f53e..560e805aa2ad9 100644
--- a/site/src/components/SignInLayout/SignInLayout.tsx
+++ b/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",
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
index 64b986dac79d0..9ffe7e0e41b4c 100644
--- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
+++ b/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: {
diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx
index d7b1bfbc83c0b..77c05842cefea 100644
--- a/site/src/pages/404Page/404Page.tsx
+++ b/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",
diff --git a/site/src/pages/HealthPage/HealthPage.tsx b/site/src/pages/HealthPage/HealthPage.tsx
index 55f5f820f8cfc..a25ae0c77adf9 100644
--- a/site/src/pages/HealthPage/HealthPage.tsx
+++ b/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,12 +60,9 @@ export function HealthPageView({
   const styles = useStyles()
 
   return (
-    <Box
+    <DashboardFullPage
       sx={{
-        height: "calc(100vh - 62px - 36px)",
         overflow: "hidden",
-        // Remove padding added from dashboard layout (.siteContent)
-        marginBottom: "-48px",
       }}
     >
       <FullWidthPageHeader sticky={false}>
@@ -214,7 +212,7 @@ export function HealthPageView({
           />
         </Box>
       </Box>
-    </Box>
+    </DashboardFullPage>
   )
 }
 
diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
index a58ccb6d47399..39464ab886085 100644
--- a/site/src/pages/LoginPage/LoginPageView.tsx
+++ b/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",
   },
 
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
index 32b9ffcd39afc..a6aea894fe903 100644
--- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
@@ -144,7 +144,7 @@ export const TemplateEmbedPageView: FC<{
             height={{
               // 80px is the vertical padding of the content area
               // 36px is from the status bar from the bottom
-              md: "calc(100vh - (80px + 36px))",
+              height: "calc(100vh - (80px + 36px))",
               top: 40,
               position: "sticky",
             }}
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
index efdb9aee357cb..9f48e92846c7d 100644
--- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx
+++ b/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}
       />
     </>
   )
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx
index e846a5533abc6..195295de3b31f 100644
--- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx
+++ b/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,
   },
 }
 
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
index 5095ae7ea2665..8479697deb1b8 100644
--- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
+++ b/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>
   )
 }
 
diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index d397fc776b141..a1cb95092bba4 100644
--- a/site/src/theme/theme.ts
+++ b/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,

From 768d927cc3b0911066e7cf37ee33f1efe4d69930 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 23 Aug 2023 18:19:43 +0000
Subject: [PATCH 2/6] Add better comment

---
 .../TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
index a6aea894fe903..1ae272add2d46 100644
--- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
@@ -142,8 +142,10 @@ 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
+              // 80px is the vertical padding of the content area 36px is from
+              // the status bar from the bottom We want to use the vh unit since
+              // it will be sticky to the screen and not relative to the parent
+              // layout
               height: "calc(100vh - (80px + 36px))",
               top: 40,
               position: "sticky",

From f994197992926468d313cbd6ccde32312c6570aa Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 23 Aug 2023 18:44:39 +0000
Subject: [PATCH 3/6] Fix

---
 site/src/components/Dashboard/DashboardLayout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
index a508f8bff0711..605f305a49356 100644
--- a/site/src/components/Dashboard/DashboardLayout.tsx
+++ b/site/src/components/Dashboard/DashboardLayout.tsx
@@ -113,6 +113,7 @@ export const DashboardFullPage = (props: BoxProps) => {
         display: "flex",
         flexDirection: "column",
         flexBasis: 0,
+        minHeight: "100%",
       }}
     />
   )

From b7aee6cca475d7582abb299d160d395b581b3d5b Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 23 Aug 2023 15:48:04 -0300
Subject: [PATCH 4/6] Update
 site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx

Co-authored-by: Kayla Washburn <mckayla@hey.com>
---
 .../TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
index 1ae272add2d46..cc2f083afdd8f 100644
--- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
@@ -142,10 +142,8 @@ 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 We want to use the vh unit since
-              // it will be sticky to the screen and not relative to the parent
-              // layout
+              // 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",

From 8469894272664fad6c22c1a6e32e726a68437e9d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 23 Aug 2023 19:52:22 +0000
Subject: [PATCH 5/6] Fix health page

---
 site/src/pages/HealthPage/HealthPage.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/HealthPage/HealthPage.tsx b/site/src/pages/HealthPage/HealthPage.tsx
index a25ae0c77adf9..2d845fcbed128 100644
--- a/site/src/pages/HealthPage/HealthPage.tsx
+++ b/site/src/pages/HealthPage/HealthPage.tsx
@@ -60,11 +60,7 @@ export function HealthPageView({
   const styles = useStyles()
 
   return (
-    <DashboardFullPage
-      sx={{
-        overflow: "hidden",
-      }}
-    >
+    <DashboardFullPage>
       <FullWidthPageHeader sticky={false}>
         <Stack direction="row" spacing={2} alignItems="center">
           {healthStatus.healthy ? (
@@ -113,8 +109,10 @@ export function HealthPageView({
       <Box
         sx={{
           display: "flex",
+          flexBasis: 0,
+          flex: 1,
           alignItems: "start",
-          height: "100%",
+          overflow: "hidden",
         }}
       >
         <Box

From 587c3fa666c489910009f5320cbc74946c7904e1 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 23 Aug 2023 20:31:32 +0000
Subject: [PATCH 6/6] Fix health page

---
 site/src/pages/HealthPage/HealthPage.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/src/pages/HealthPage/HealthPage.tsx b/site/src/pages/HealthPage/HealthPage.tsx
index 2d845fcbed128..3df01cf66c4c1 100644
--- a/site/src/pages/HealthPage/HealthPage.tsx
+++ b/site/src/pages/HealthPage/HealthPage.tsx
@@ -111,7 +111,6 @@ export function HealthPageView({
           display: "flex",
           flexBasis: 0,
           flex: 1,
-          alignItems: "start",
           overflow: "hidden",
         }}
       >
@@ -120,7 +119,6 @@ export function HealthPageView({
             width: (theme) => theme.spacing(32),
             flexShrink: 0,
             borderRight: (theme) => `1px solid ${theme.palette.divider}`,
-            height: "100%",
           }}
         >
           <Box
@@ -198,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%" }}