fix(search): drop stray braces that break search results box styles - #2819
Open
lunny wants to merge 1 commit into
Open
fix(search): drop stray braces that break search results box styles#2819lunny wants to merge 1 commit into
lunny wants to merge 1 commit into
Conversation
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.
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
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.
What/Why/How?
SearchResultsBoxinsrc/components/SearchBox/styled.elements.tsxhas an extra}after three interpolations (background-color,border-top,border-bottom):With styled-components v6 (stylis 4) the first stray brace closes the rule early, so everything after
background-coloris emitted outside the class rule and dropped by the browser: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: 250pxis lost, the results box grows to the full result list height (measured 5838px for a 79-result query), so its perfect-scrollbar container hasclientHeight === scrollHeight, PS keeps.ps__rail-yatdisplay: 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 compactMenuItemLabelpadding 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-bottomonly specify a colour, so withborder-styledefaulting tononethey still paint nothing — same as today's behaviour. I kept the diff minimal instead of guessing1px solid; happy to add it if that was the original intent (it wasborder-top: 1px solid #e1e1e1before 1bf490c).Reference
Introduced in 1bf490c (
fix: search-box use theme, first released in v2.0.0-rc.19); a0bd27c later renamedtheme.menu.*totheme.sidebar.*and kept the typo.Reported downstream (redocusaurus / Docusaurus 3, which uses styled-components 6): https://gitea.com/gitea/docs/issues/257
Tests
ServerStyleSheetsnippet (output above); the same snippet on styled-components 5 shows the brace being tolerated.scrollHeight === clientHeight, nops--active-y,.ps__rail-ydisplay: none, scrolling impossible. After applying the missing declarations: box = 250px,scrollHeight3674px,ps--active-yset, rail visible, scrolling works.e2e/integration/search.e2e.tskeeps passing on selectors ([data-role="search:results"]), unchanged.Check yourself