fix(search): allow scrolling through search results#2712
Conversation
The results container never had a bounded height, so it grew to fit all matches instead of scrolling — searches with many matches (e.g. "code quality analysis" → 83 docs) only showed the first ~2.5 results with no way to scroll further, and the overflow was silently clipped. Bound .md-search__output to the dialog's available height and let it own the scroll, instead of relying on an unbounded scrollwrap that only worked by accident on narrow phone viewports via a media query. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Up to standards ✅🟢 Issues
|
There was a problem hiding this comment.
Pull Request Overview
The PR successfully addresses the issue where search results were clipped and unscrollable by transitioning scroll management from .md-search__scrollwrap to .md-search__output. This ensures that large result sets are accessible via vertical scrolling and that the container remains bounded to the available dialog height.
Codacy analysis indicates the changes are up to standards with no new automated quality issues. However, there is a significant implementation gap: while the scrolling logic was moved, the associated custom scrollbar styles and keyboard focus indicators still target the legacy container. This creates a regression in visual consistency and accessibility that should be resolved before merging. All core functional requirements for scrolling have been met, but UI polish is missing.
About this PR
- The relocation of scrolling logic from
.md-search__scrollwrapto.md-search__outputhas decoupled several UI/UX features (custom scrollbars and focus outlines) from the active scrollable element. This results in a loss of visual consistency and potential accessibility issues for keyboard users.
Test suggestions
- Verify that a search yielding many results (e.g., 80+) displays a vertical scrollbar on the results container.
- Confirm that the search results container does not grow beyond the height of the search dialog.
- Verify that custom scrollbar styles and focus states apply correctly to the new scrollable container (
.md-search__output).
Prompt proposal for missing tests
Consider implementing these tests if applicable:
1. Verify that custom scrollbar styles and focus states apply correctly to the new scrollable container (`.md-search__output`).
TIP Improve review quality by adding custom instructions
TIP How was this review? Give us feedback
Scrolling now happens on .md-search__output, so the custom scrollbar and keyboard-focus outline need to target that element instead of the old .md-search__scrollwrap, which no longer scrolls. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Summary
.md-search__outputhadmax-height: none, so the results list grew to fit all content instead of shrinking to the dialog's available height; the nested.md-search__scrollwrap'soverflow-y: autonever had anything to actually overflow, so no scrollbar ever appeared and extra content was clipped by the outer dialog. It only worked by accident on very narrow phone viewports where a separate media query forced a bounded height..md-search__outputto the dialog's available space and lets it own the scroll directly.Test plan
mkdocs buildsucceeds with no new warnings🤖 Generated with Claude Code