From e5758a12c778e461a71dbab30ee7a07809e15c7c Mon Sep 17 00:00:00 2001
From: Ethan <39577870+ethanndickson@users.noreply.github.com>
Date: Tue, 20 May 2025 14:25:13 +1000
Subject: [PATCH] fix(site): center `/cli-auth` on firefox (#17929)

`-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" />
---
 site/src/components/SignInLayout/SignInLayout.tsx    | 3 ++-
 site/src/pages/CliInstallPage/CliInstallPageView.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx
index 6a0d4f5865..c557fd3b4c 100644
--- 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
index 9356cee615..db77abcb28 100644
--- 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",