Skip to content

fix(search): drop stray braces that break search results box styles - #2819

Open
lunny wants to merge 1 commit into
Redocly:mainfrom
lunny:fix/search-results-box-stray-braces
Open

fix(search): drop stray braces that break search results box styles#2819
lunny wants to merge 1 commit into
Redocly:mainfrom
lunny:fix/search-results-box-stray-braces

Conversation

@lunny

@lunny lunny commented Aug 3, 2026

Copy link
Copy Markdown

What/Why/How?

SearchResultsBox in src/components/SearchBox/styled.elements.tsx has an extra } after three interpolations (background-color, border-top, border-bottom):

background-color: ${({ theme }) => darken(0.05, theme.sidebar.backgroundColor)}};

With styled-components v6 (stylis 4) the first stray brace closes the rule early, so everything after background-color is emitted outside the class rule and dropped by the browser:

// broken (current main)
.GvrvM{padding:5px 0;background-color:#f2f2f2;}
color:#333;
min-height:150px;
max-height:250px;
margin-top:10px;
line-height:1.4;
font-size:0.9em;

// after this PR
.kuYQEX{padding:5px 0;background-color:#f2f2f2;color:#333;min-height:150px;max-height:250px;margin-top:10px;line-height:1.4;font-size:0.9em;}

styled-components v5 (stylis 3.5) happens to tolerate the stray brace, which is why this is invisible in the bundled demo but breaks consumers that supply styled-components v6 — and v6 is an allowed peer range (^4.1.1 || ^5.1.1 || ^6.0.5).

The user-visible symptom is that the search results are not scrollable and no scrollbar appears. Because max-height: 250px is lost, the results box grows to the full result list height (measured 5838px for a 79-result query), so its perfect-scrollbar container has clientHeight === scrollHeight, PS keeps .ps__rail-y at display: none, and the sidebar (overflow: hidden) clips everything below the viewport. Results exist but are unreachable. color, margin-top, line-height, font-size, li { background-color: inherit } and the compact MenuItemLabel padding are lost too, so result rows also render oversized.

Fix: remove the three stray }. The change is whitespace-only in effect on the source, but restores all of the intended declarations.

Note: border-top/border-bottom only specify a colour, so with border-style defaulting to none they still paint nothing — same as today's behaviour. I kept the diff minimal instead of guessing 1px solid; happy to add it if that was the original intent (it was border-top: 1px solid #e1e1e1 before 1bf490c).

Reference

Introduced in 1bf490c (fix: search-box use theme, first released in v2.0.0-rc.19); a0bd27c later renamed theme.menu.* to theme.sidebar.* and kept the typo.

Reported downstream (redocusaurus / Docusaurus 3, which uses styled-components 6): https://gitea.com/gitea/docs/issues/257

Tests

  • Reproduced the stylis-4 truncation with a minimal styled-components 6.1.17 + ServerStyleSheet snippet (output above); the same snippet on styled-components 5 shows the brace being tolerated.
  • Verified against a real redoc-rendered site (docs.gitea.com API reference, redoc 2.4.0 via redocusaurus): before, results box = 5838px, container scrollHeight === clientHeight, no ps--active-y, .ps__rail-y display: none, scrolling impossible. After applying the missing declarations: box = 250px, scrollHeight 3674px, ps--active-y set, rail visible, scrolling works.
  • e2e/integration/search.e2e.ts keeps passing on selectors ([data-role="search:results"]), unchanged.

Check yourself

  • Code is linted
  • Tested
  • All new/updated code is covered with tests

The `SearchResultsBox` template has an extra `}` after the
`background-color`, `border-top` and `border-bottom` interpolations.

With styled-components v6 (stylis 4) the first stray brace closes the rule
early, so every declaration after `background-color` is emitted outside of
the class rule and dropped by the browser. Losing `max-height: 250px` means
the results box grows to the full result list height, perfect-scrollbar sees
no overflow and renders no scrollbar, and the sidebar (`overflow: hidden`)
clips the results, so results below the fold become unreachable.
@lunny
lunny requested a review from a team as a code owner August 3, 2026 00:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant