fix(search): shrink the topbar search box so it can't overflow on mobile#45
Merged
Conversation
The dogfood site had drifted badly behind the gem (epic #8 shipped Markdown islands, the API-docs kit, the .md twin, llms.txt, search, MCP, --sync, and more — none of it documented). Rewrite + extend so the site documents AND demonstrates every capability, each page dogfooding the gem. Registry + nav (app/models/doc.rb) - Regrouped into 5 headings: Getting started / Authoring / Reference / AI & tooling / Deploy. nav_registries stays the canonical nav path. New pages - Markdown authoring (/docs/markdown) — the `md` island, the single-quoted heredoc convention, the GFM vocabulary rendered LIVE, how it flows into the .md twin. - API reference (/docs/api) — renders a live DocsUI::Endpoint + FieldTable + ErrorTable + RequestExample (4 client tabs) + JsonResponse, plus the api_base_url/api_auth_header/api_clients config. - AI & agents (/docs/ai) — the .md twin, the Markdown masthead action, /llms.txt + /llms-full.txt, the built-in MCP server, and the AGENTS.md + write-docs-page skill the generator scaffolds. - Search (/docs/search) — server-rendered search + the ⌘K palette, the search_/search_path/search_shortcuts config, progressive enhancement. Rewrites - Configuration — the "All options" table is now COMPLETE (28/28 knobs with defaults, was 13), grouped by concern; notes version_badge accepts a String or callable; nav_registries canonical, c.nav the escape hatch. - Overview — current "What you get" covering the whole surface, each feature linking to its page. - Installation — documents the --sync additive upgrade path. - Styling & CSS — adds c.code_theme / code_theme_dark / dark_themes (the light/dark Rouge highlight mechanism), corrected to describe the now-graceful theme-name degradation (not the old NameError crash). - Authoring — expanded building-blocks section links to the dedicated pages. Every page dogfoods the kit (md islands, DocsUI::Section/Code, live component renders) and renders 200; the .md twin, /llms.txt, /llms-full.txt, and search all render clean. Gem suite stays green (538 examples). Refs #8 Claude-Session: https://claude.ai/code/session_01FPQb6z3YwcKRMbvoJhdxnX
Found while dogfooding the consumer sites: on a 390px phone the topbar's brand + search box + theme switcher overflowed ~34px, pushing the theme switcher off-screen (a horizontal-scroll regression on every consumer site since the search feature shipped). The search box was `dropdown flex-none` — it refused to shrink — and daisyUI's `.input` carries a default min-width. Change it to `min-w-0` (shrinkable) and cap the input at `max-w-[40vw]` on mobile, lifted at `sm:`. The brand + search + switcher now fit at 390px regardless of platform font metrics. Spec asserts the shrink classes are present (and flex-none is gone). 539 examples, 0 failures; rubocop clean. Refs #8 Claude-Session: https://claude.ai/code/session_01FPQb6z3YwcKRMbvoJhdxnX
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
1 participant
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
Found while dogfooding the consumer docs sites (phlex-reactive, daisyui): on a 390px phone the topbar's brand + search box + theme switcher overflowed by ~34px, pushing the theme switcher off-screen and giving the page a horizontal scrollbar. This is a regression on every consumer site since the server-rendered search shipped (#35) — the CI "Demo site" responsive spec on the phlex-reactive docs refresh caught it (
document.documentElement.scrollWidth - clientWidth == 34, offending element: the.dropdownsearch box).Root cause
DocsUI::SearchBox's outer container wasdropdown flex-none—flex-nonerefuses to shrink — and daisyUI's.inputcarries a defaultmin-width. So on a narrow topbar the search box held its intrinsic width and the theme switcher (in a siblingflex-none) was pushed past the viewport edge.Fix
flex-none→min-w-0on the search box, andmin-w-0on the form, so the box can shrink.max-w-[40vw]on mobile, lifted atsm:max-w-none, so the brand + search + switcher always fit at 390px regardless of platform font metrics.The shortcut
<kbd>hints were alreadyhidden sm:flex, so mobile only loses a little input width — the box stays usable and the palette still opens.Verification
DocsUI::SearchBoxspec asserts the shrink classes are present andflex-noneis gone.bundle exec rspec— 539 examples, 0 failures.bundle exec rubocop— clean.The new
max-w-[40vw]is a render-time literal in a.rbcomponent, so it's scanned into the Tailwind build like the other chrome classes (verified it appears in a consuming site's built CSS).Refs #8.
https://claude.ai/code/session_01FPQb6z3YwcKRMbvoJhdxnX