Skip to content

fix(search): allow scrolling through search results#2712

Merged
claudiacodacy merged 3 commits into
masterfrom
fix/search-results-scroll
Jul 23, 2026
Merged

fix(search): allow scrolling through search results#2712
claudiacodacy merged 3 commits into
masterfrom
fix/search-results-scroll

Conversation

@claudiacodacy

Copy link
Copy Markdown
Contributor

Summary

  • Fix the search dropdown so results with many matches (e.g. searching "code quality analysis" → 83 matching documents) can be scrolled through — previously only the first ~2.5 results were visible with no way to reach the rest.
  • Root cause: .md-search__output had max-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's overflow-y: auto never 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.
  • Fix bounds .md-search__output to the dialog's available space and lets it own the scroll directly.

Test plan

  • mkdocs build succeeds with no new warnings
  • Verified locally in browser: searched "code quality analysis" (83 matching documents, same as the reported bug), confirmed via DOM inspection that the results container is height-bounded with overflowing content, and that scrolling reveals additional results beyond the first few
  • Spot-check on a real desktop browser and a small phone viewport after merge

🤖 Generated with Claude Code

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>
@claudiacodacy
claudiacodacy requested a review from a team as a code owner July 23, 2026 11:04
@github-actions
github-actions Bot temporarily deployed to Netlify July 23, 2026 11:05 Inactive
@codacy-production

Copy link
Copy Markdown
Contributor

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

AI Reviewer: first review requested successfully. AI can make mistakes. Always validate suggestions.

Run reviewer

TIP This summary will be updated as you push new changes.

@codacy-production codacy-production Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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__scrollwrap to .md-search__output has 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

Comment thread theme/stylesheets/header.css Outdated
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>
@github-actions
github-actions Bot temporarily deployed to Netlify July 23, 2026 11:12 Inactive
@claudiacodacy
claudiacodacy enabled auto-merge (squash) July 23, 2026 11:43
@claudiacodacy
claudiacodacy merged commit 7e8faa1 into master Jul 23, 2026
5 checks passed
@claudiacodacy
claudiacodacy deleted the fix/search-results-scroll branch July 23, 2026 11:46
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.

2 participants