[obvious-autobuild-staging]

Human author: David Boskovic ([email protected])

Why

The converter's options footer wraps onto two lines anywhere below ~1576px of viewport — the default state in the small-desktop band — and the sub-768px accordion squeezed the panes whenever it was open. Wrapping reads as clutter and the accordion steals pane height, so the bar now collapses to a single Parse settings line with the full control set in a drop-up panel.

What

• One collapse behavior at all widths below the fit threshold. The bar renders a single line: "Parse settings" trigger + chevron, the live active-options summary, and the large-file notice right-aligned (the notice never hides inside the menu). At the threshold and above, the controls render inline as today's unwrapped row. The md:flex-wrap stacking and the max-md accordion (mobileOpen / options-mobile-toggle) are gone.
• Measured threshold, not the guessed one. The spec expected ≈ xl (1280px), but measuring the widest control set (csv→json with encoding) shows a natural one-line width of ~1507px; with a classic scrollbar's gutter it stops wrapping at ~1564px of viewport. The threshold is therefore a custom fit breakpoint at 98.5rem (1576px) in index.css (--breakpoint-fit), mirrored in the component's useMediaQuery query (media queries can't read CSS vars). Biased to the safe side: collapsing a beat early is invisible, wrapping again is the bug. One breakpoint for both directions, per the locked decision.
• Drop-up panel, no layout shift. The full existing control set — same selects, same switches, same hints, same direction-conditionality (csv→json: separator, conditional encoding, 7 toggles; json→csv: separator, conditional encoding, Flatten) — renders into the initial DOM hidden (SEO initial-DOM rule preserved; hints keep their load-time markup).
• Interaction mirrors FeedbackVote's popout pattern: trigger toggles; Escape, outside click (click, not mousedown), and trigger re-click close it; focus returns to the trigger. aria-expanded + aria-haspopup on the trigger; the panel is a labelled non-modal region — controls inside are ordinary form controls, not role=menu items.

How to Review

• app/src/components/OptionsRow.tsx — the whole change: both presentations (collapsed trigger row + drop-up; inline row), dismissal/focus handling, and the shared control set.
• app/src/index.css — the measured --breakpoint-fit token with the measurement documented in place.
• Tests: OptionsRow.test.tsx (accordion coverage removed; collapsed rendering, all three close paths + focus return, live summary updates from inside the menu, notice placement, direction-conditional contents, encoding-wired select, inline presentation at threshold) and App.test.tsx (mobile/small-screen coverage updated).
• Changelog entry 15 ships in this PR per convention; app/dist rebuilt.

Test Evidence

Open the menu, toggle Parse numbers inside it (collapsed summary drops the option), close via Escape with focus returning to the trigger
Open the menu, toggle Parse numbers inside it (collapsed summary drops the option), close via Escape with focus returning to the trigger — recording

Drop-up panel carries the full control set over the panes without layout shift (before: 375px accordion open squeezing panes; after: open menu at 1024px and 375px)

Collapsed one-line options bar below the fit threshold (1024px: wrapped 2-line bar before, 41px one-line trigger row after)

• 522 tests green (was 346 before this feature branch's additions), npm run lint and npx tsc -b --noEmit clean, production build + prerender rebuilt and committed, verify-seo.sh passes.
• Dogfooded in a real browser at the new threshold: bar is one line (41px) at 1024px and 1280px; single-line 49px inline row with no trigger at 1576px/1600px. Open/toggle/close, live summary updates, Escape, outside click, and focus return to the trigger all verified live.
• Before/after captures and a flow recording submitted via autobuild evidence against the tested head SHA.

🔗 Obvious Project · 🧵 Obvious Thread · 🔀 Obvious PR Artifact