fix(site): center /cli-auth on firefox (#17929)

ethanndickson · web-flow · commit e5758a12c778 · 2025-05-20T14:25:13.000+10:00
`-webkit-fill-available` is not available in Firefox: https://caniuse.com/mdn-css_properties_height_stretch `-moz-available` doesn't work on `height`, so we have to use `100vh`. Before: <img width="1405" alt="image" src="https://github.com/user-attachments/assets/bd0f4390-50e9-47fa-8501-f3e3483d3c0d" /> After: <img width="1329" alt="image" src="https://github.com/user-attachments/assets/f19f4b2a-3398-4d64-8e12-5cfcb84106a9" /> The existing CSS is retained in browsers that support `-webkit-fill-available`, i.e. chrome: <img width="253" alt="image" src="https://github.com/user-attachments/assets/c1b356b4-c228-4580-a4c3-cddc2e0327b4" />
diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx
@@ -17,7 +17,8 @@ export const SignInLayout: FC<PropsWithChildren> = ({ children }) => {
 const styles = {
 	container: {
 		flex: 1,
-		height: "-webkit-fill-available",
+		// Fallback to 100vh
+		height: ["100vh", "-webkit-fill-available"],
 		display: "flex",
 		justifyContent: "center",
 		alignItems: "center",
diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.tsx
@@ -39,7 +39,8 @@ export const CliInstallPageView: FC<CliInstallPageViewProps> = ({ origin }) => {
 const styles = {
 	container: {
 		flex: 1,
-		height: "-webkit-fill-available",
+		// Fallback to 100vh
+		height: ["100vh", "-webkit-fill-available"],
 		display: "flex",
 		flexDirection: "column",
 		justifyContent: "center",
