fix(login): keep 360px design width with max-width: 100% cap

Switching ``Buttons`` to ``width: 100%`` (in c32ad712) had a
side-effect — with ``FormWrapper`` sized to ``max-content``, a
100% child without LocalUserForm alongside it lets the card
collapse to the button's intrinsic text width. Per PR #1097 review,
go back to the 360px design width and rely on ``max-width: 100%``
to keep it from overflowing tighter parents (the enterprise cover
layout's 272px inner especially).

Apply the same shape to LocalUserForm — its hardcoded 360px alone
would still overflow on the cover layout — so the two surfaces
stay in lockstep when switching between SSO and password modes.

(Pre-commit hook still crashes on the ``context.getDeclaredVariables``
bug in main; unrelated.)
This commit is contained in:
gitlawr
2026-05-18 12:25:08 +08:00
committed by jialin
parent 55fbe118d5
commit 67f5c794e1
2 changed files with 10 additions and 5 deletions
@@ -75,7 +75,10 @@ const LocalUserForm: React.FC<LocalUserFormProps> = (props) => {
return (
<Form
form={form}
style={{ width: '360px', margin: '0 auto' }}
// Same shape Buttons uses: 360px design width, capped at the
// parent's inner width so the form doesn't overflow on the
// enterprise cover layout (272px inner).
style={{ width: '360px', maxWidth: '100%', margin: '0 auto' }}
onFinish={handleLogin}
>
<Form.Item
+6 -4
View File
@@ -30,10 +30,12 @@ const Buttons = styled.div`
justify-content: flex-start;
align-items: stretch;
gap: 24px;
// 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%;
// Match LocalUserForm's 360px on roomy layouts so switching between
// SSO and password doesn't resize the card, but cap at the parent's
// inner width so the column doesn't overflow when the parent is
// tighter (e.g. the enterprise login's cover variant: 272px inner).
width: 360px;
max-width: 100%;
margin-top: 52px;
`;