synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-13 21:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
`-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" />
This commit is contained in:
Ethan
2025-05-20 14:25:13 +10:00
committed by GitHub
parent dc21016151
commit e5758a12c7
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
site/src/components/SignInLayout/SignInLayout.tsx
View File

@ -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",

3
site/src/pages/CliInstallPage/CliInstallPageView.tsx
View File

@ -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",