Commite5758a1

authored

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" />

1 parentdc21016 commite5758a1Copy full SHA for e5758a1

File tree

-2

lines changed

site/src
- components/SignInLayout
  - SignInLayout.tsx
- pages/CliInstallPage
  - CliInstallPageView.tsx

-2

lines changed

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,8 @@ export const SignInLayout: FC<PropsWithChildren> = ({ children }) => {`
`17`	`17`	`conststyles={`
`18`	`18`	`container:{`
`19`	`19`	`flex:1,`
`20`		`-height:"-webkit-fill-available",`
	`20`	`+// Fallback to 100vh`
	`21`	`+height:["100vh","-webkit-fill-available"],`
`21`	`22`	`display:"flex",`
`22`	`23`	`justifyContent:"center",`
`23`	`24`	`alignItems:"center",`

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,8 @@ export const CliInstallPageView: FC<CliInstallPageViewProps> = ({ origin }) => {`
`39`	`39`	`conststyles={`
`40`	`40`	`container:{`
`41`	`41`	`flex:1,`
`42`		`-height:"-webkit-fill-available",`
	`42`	`+// Fallback to 100vh`
	`43`	`+height:["100vh","-webkit-fill-available"],`
`43`	`44`	`display:"flex",`
`44`	`45`	`flexDirection:"column",`
`45`	`46`	`justifyContent:"center",`

Comments

(0)