fix(SearchBox): keep icon and input on one row at ≤480px#34
Open
JSv4 wants to merge 1 commit into
Open
Conversation
The mobile media query gave the input a non-zero flex-basis, letting its hypothetical size push it onto its own flex line and stranding the leading search icon on the row above (icon / input / button as three stacked rows). Use flex: 1 1 0 on the input in the <=480px media query, matching the desktop base rule, so the input always shares the first row with the icon and grows to fill the remaining space; only the full-width button wraps to a second row. This is robust regardless of the input's intrinsic width, unlike the prior flex: 1 1 auto which could still wrap on sufficiently narrow viewports. Adds a SearchBox test asserting DOM order and the mobile flex rule, plus a MobileLayout story at 320px for visual regression coverage. Fixes #33
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| const ruleFor = (selector: string) => { | ||
| const re = new RegExp( | ||
| `${selector.replace(/[.]/g, '\\.')}\\s*\\{([^}]*)\\}` |
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
3 participants
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.
Summary
Fixes #33 — on screens ≤ 480px the leading search icon was stranded on its own line above the input (icon / input / button rendering as three stacked rows).
Root cause
The
@media (max-width: 480px)rule gave.oc-search-box__inputa non-zero flex-basis. Withflex-wrap: wrap, an item's hypothetical (flex-basis) size — not its shrunk size — is what the line-collection algorithm uses to decide wrapping. A non-zero basis lets the input's hypothetical size exceed the remaining space next to the icon, so the input wraps onto its own flex line and leaves theflex-shrink: 0icon alone on the row above.Note: the specific value reported in #33 (
flex: 1 1 100%) was already changed toflex: 1 1 autoin 0.1.20 (the #27 fix, which the reporter hadn't tested — they were on 0.1.19). Butautois still not bulletproof: it relies on the input's intrinsic width fitting beside the icon, so on a sufficiently narrow viewport the icon can still be stranded. That's why this bug has now been filed twice.Fix
Set the input to
flex: 1 1 0in the ≤480px media query — a zero flex-basis, matching the desktop base rule (flex: 1). The input's hypothetical size is then 0, so it always shares the first row with the icon and grows to fill the remaining space; only the full-width button wraps to a second row. This holds regardless of the input's intrinsic width or the viewport width.Regression coverage
SearchBox.test.tsx(new) — asserts DOM order (icon → input → button) and pins the mobile flex rule: input must beflex: 1 1 0withmin-width: 0(and explicitly not100%/auto), button full-width, icon ordered before input. jsdom can't perform flex layout, so the guard is on the CSS-in-JS rule that governs the wrap.MobileLayoutstory at 320px with a long placeholder — visual regression coverage for the reported scenario.Verification
npm run test— 156 passed (5 new)npm run lint— cleannpm run build— successhttps://claude.ai/code/session_01VMc2dtCs97wcswd8uwMddo
Generated by Claude Code