fix(login): stop SSO button from overflowing the login card
``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:
@@ -28,9 +28,12 @@ const Buttons = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-items: stretch;
|
||||
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;
|
||||
`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user