Shrink the search trigger on small screens - #58
Merged
Merged
Conversation
On a phone the trigger took 164px of a 390px header, which squeezed the book title into three lines. It now shows its icon alone, 30px wide, and the title fits in two. The rules that hid the label were already there but never applied: the Pagefind components give their own rules ID-level specificity, so no selector of ours can outrank them, and there is no property for this. Hence the forced override, scoped to the phone layout. The same specificity is why the rules that painted the trigger over the cover never took effect either. They are removed rather than left to look meaningful: the trigger is themed through the custom properties, like the dialog, and reads as a small parchment search field. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FuDB4UAnaLnNEEv8kVuotH
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.
On a phone the search trigger took 164px of a 390px header, which squeezed the book title into three lines. It now shows its icon alone.
Measured on both books, so it is not specific to the longer Integrated Dynamics title: EvilCraft was also wrapping to three lines.
Why the existing rules did nothing
The rules that hide the label and the shortcut badge were already in the stylesheet from the search change. They never applied.
The Pagefind components deliberately give their own rules ID-level specificity, using chained
:is(*, #\#)selectors, so that host pages cannot accidentally break them. Nothing built from element and class selectors can outrank that, and there is no custom property for the trigger's contents. So the override has to be forced, and it is scoped to the phone layout only.Removed rules that could not work
The same specificity explains something I had not noticed: the rules meant to paint the trigger over the dark cover never took effect either. I checked each declaration against its computed value:
backgroundrgba(255,255,255,.06)rgb(230,214,172)color#fffpadding6px 10px0 14pxborder-colorrgba(255,255,255,.35)--pf-icon-searchThey are deleted rather than left looking meaningful. Nothing changes visually, because they were never in effect: the trigger is themed through the custom properties, like the dialog, and reads as a small parchment search field on the cover. The comment above that block claimed the trigger was reachable by ordinary selectors, which was wrong, so it is corrected too.
Net effect on the stylesheet is 38 lines removed, 8 added.
Verified
npm run build,npm run lintandnpm testpass.🤖 Generated with Claude Code
https://claude.ai/code/session_01FuDB4UAnaLnNEEv8kVuotH
Generated by Claude Code