fix(cloud): keep focus rings whole on flat standalone cards on phones - #498
Merged
Merged
Conversation
Below 48rem a standalone card drops its frame and padding, so a full-width field or button reaches the card edge. The Core sign-in, password-reset, and new-password cards still clipped with overflow-hidden, which cut the outer focus ring of those controls on both sides (4 of the 4 clipped rings left in the focus audit after the focus ring change). Without border, radius, or surface there is nothing left to clip, so the flat card now stops clipping. The rings stay outside the control as on every other page. Measured on the dev stack at 390, 767, 768, and 1440 px in Chromium, WebKit, and Firefox, light and dark: no element box changes, and no ring is clipped any more.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Outcome
On phones, the Core sign-in, password-reset, and new-password pages no longer cut off the focus ring of their full-width fields and buttons. Nothing moves or changes size.
Root cause
Below 48rem a
standalone-carddrops its frame and padding (#481), so full-width controls reach the card edge. These three Core cards also carryoverflow-hiddenfor their rounded desktop frame. On a phone that clipped the 2 px outer ring on the left and right. These were the only clipped rings left in the dev-stack focus audit after #484 (4 of 1,779 focus stops).Change
The flat phone variant of
standalone-cardalso setsoverflow: visible. Without border, radius, or surface there is nothing left to clip. The rings stay outside the control, the same as on every other page. From 48rem up nothing changes, and the card keeps clipping to its rounded frame there.Verification
MinimalLayout.browser.test.ts: the flat card must not clip. The utility card in the test now carriesoverflow-hiddenlike the Core cards. The test fails without the CSS change and passes with it./auth/login,/auth/password-reset,/auth/new-passwordat 390, 767, 768, and 1440 px, light and dark, in Chromium, WebKit, and Firefox:bun run check(17/17) andgit diff --check.