refactor(site): Add bottom spacing to the dashboard layout (#6084)

BrunoQuaresma · web-flow · commit 4493649d7ecf · 2023-02-08T21:53:42.000-03:00
diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
@@ -12,6 +12,7 @@ import { updateCheckMachine } from "xServices/updateCheck/updateCheckXService"
 import { usePermissions } from "hooks/usePermissions"
 import { UpdateCheckResponse } from "api/typesGenerated"
 import { DashboardProvider } from "./DashboardProvider"
+import { dashboardContentBottomPadding } from "theme/constants"
 
 export const DashboardLayout: FC = () => {
   const styles = useStyles()
@@ -71,5 +72,6 @@ const useStyles = makeStyles((theme) => ({
   },
   siteContent: {
     flex: 1,
+    paddingBottom: dashboardContentBottomPadding, // Add bottom space since we don't use a footer
   },
 }))
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -16,7 +16,7 @@ import { AvatarData } from "components/AvatarData/AvatarData"
 import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable"
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
 import { FC, useCallback, useEffect, useRef, useState } from "react"
-import { navHeight } from "theme/constants"
+import { dashboardContentBottomPadding, navHeight } from "theme/constants"
 import { TemplateVersionFiles } from "util/templateVersion"
 import {
   CreateFileDialog,
@@ -403,6 +403,7 @@ const useStyles = makeStyles<
     flex: 1,
     display: "flex",
     flexDirection: "column",
+    marginBottom: -dashboardContentBottomPadding, // Remove dashboard bottom padding
   },
   topbar: {
     padding: theme.spacing(2),
diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts
@@ -8,3 +8,4 @@ export const containerWidth = 1380
 export const containerWidthMedium = 1080
 export const sidePadding = 24
 export const CardPadding = 20
+export const dashboardContentBottomPadding = 8 * 6
