Fix search modal alignment and match keyboard hints to design - #36
Open
jbouder wants to merge 3 commits into
Open
Fix search modal alignment and match keyboard hints to design#36jbouder wants to merge 3 commits into
jbouder wants to merge 3 commits into
Conversation
…rched At min-width 50rem the theme pads .pagefind-ui__form by 1.5rem, but Pagefind/Starlight position the magnifier icon and clear button absolutely from the form's corner, so they sat on the input's edge. Offset both by the padding. Also only draw the hairline above the "↵ open esc close" hints once results are showing; before a search it doubled up with the input's own underline. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Override Starlight's Search component to inject a footer bar pinned to the bottom of the dialog with keycap chips (↑↓ navigate, ↵ open, esc close), replacing the plain-text ::after hint. On desktop the hidden Cancel button is shown as an `esc` keycap at the end of the input row and takes the place of Pagefind's clear button; mobile keeps Cancel and the clear button, and hides the footer. Also swaps Pagefind's filled magnifier for an outline icon matching the header trigger, and lets results scroll between the input and the footer. Refs #35 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Neither Pagefind's default UI nor Starlight handle ↑↓ in the search dialog, so the footer hints were not yet true. Move a highlight across result links while focus stays in the input, wrap at either end, clear it when the query changes or the dialog closes, and follow the highlighted (or first) link on Enter. Refs #35 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
12 tasks
mikemazara
approved these changes
Sep 2, 2026
32 tasks
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
2 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 the search dialog defects tracked in #35:
↑↓ navigate,↵ open,esc closekeycap chips, via a newSearchcomponent override.esckeycap sits at the end of the input row on desktop and closes the dialog. It replaces Pagefind's clear button there, per the design; mobile keeps "Cancel" and the clear button and hides the footer.↑/↓move a highlight across result links while focus stays in the input, wrapping at either end;↵opens the highlighted (or first) result. Neither Pagefind nor Starlight provided this, so the footer hints now describe real behavior.Closes #35
Test plan
bun run test(74 + 2 pass)cd docs && bun run build && bunx astro preview) checked in Chrome at desktop width: empty state, results state, light and darkesckeycap click closes the dialog↓/↑move and wrap the highlight, typing clears it,↵navigates to the highlighted page and closes the dialog🤖 Generated with Claude Code