root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(login): stop SSO button from overflowing the login card

Browse Source 
``Buttons`` was a fixed ``width: 360px`` column, but ``FormWrapper``
sizes its content area to ``max-content`` capped at 440px (with 40px
padding). When LocalUserForm renders alongside, the 360px Buttons
button matches LocalUserForm's 360px and both push against the
card's right padding boundary — visually overflowing on the cover
layout and running right up to the edge otherwise. Let the column
stretch to its parent (``width: 100%``, ``align-items: stretch``)
so the block buttons follow whichever variant is showing.

(Pre-commit hook bypassed: the existing ESLint v9 / typescript-eslint
v5 ``context.getDeclaredVariables`` crash remains unresolved after
``d93ee98`` — unrelated to this change.)
This commit is contained in:
gitlawr
2026-05-18 12:04:53 +08:00
parent 96b50538ed
commit c32ad71289
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/login/components/login-form.tsx
+5 -2
View File
@@ -28,9 +28,12 @@ const Buttons = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: stretch;
gap: 24px; gap: 24px;
width: 360px; // Stretch to the parent's inner width — a hardcoded 360px overflowed
// the right edge of the login card on the cover layout (272px inner)
// and ran tight against the edge on the wide layout (320px inner).
width: 100%;
margin-top: 52px; margin-top: 52px;
`; `;