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:
@@ -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
|
||||
|
||||
@@ -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;
|
||||
`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user