fix(layout): polish smaller-desktop (768px–1279px) headers, half-pane actions, and seam clearance

[obvious-autobuild-staging]

Why

Because SplitPane enters its 50/50 side-by-side layout at md: (768px), each pane at 768px–1279px is only 384px–639px wide. Under that half-pane width budget, PaneShell's fixed md:h-12 height lock clipped wrapped action buttons beneath the CsvTable toolbar, showing full text labels on secondary actions (Upload, Copy, Clear, Download) forced the input header to wrap across two lines from 768px to 1150px, the floating DividerSwitch (⇄ CSV → JSON) overlapped the right edge of the Dropzone paste input box at 768px–1024px, and wrapped OptionsRow lines left dangling vertical | divider rules.

What

• Unclip PaneShell headers (app/src/components/PaneShell.tsx): Replace the rigid md:h-12 md:py-0 height lock with md:min-h-12 md:py-1.5 (gap-x-3 gap-y-1.5) so single-line headers stay 48px tall and wrapped narrow splits expand cleanly with their bottom border intact.
• Size secondary header action labels for 50/50 half-panes (app/src/components/InputPane.tsx, app/src/components/OutputPane.tsx): Keep secondary action text labels (Upload, Copy, Clear, Download) icon-only until xl:inline (>=1280px, where each 50/50 pane reaches >=640px) while preserving aria-label and title on both panes.
• Clear DividerSwitch from Dropzone (app/src/components/DividerSwitch.tsx, app/src/components/Dropzone.tsx): Tighten DividerSwitch on md: (md:h-8 md:gap-1 md:px-2.5 md:text-[11px]) and add md:px-16 seam clearance on Dropzone so the center direction switch never overlaps the paste box.
• Clean up OptionsRow & CsvTable wrapping (app/src/components/OptionsRow.tsx, app/src/components/CsvTable.tsx): Tighten md:–xl: gaps, hide <Divider /> rules until xl:block, render the trailing flex-1 spacer only when notice is present, and add flex-wrap to CsvTable's selection chip strip.

How to Review

• app/src/components/PaneShell.tsx, InputPane.tsx, OutputPane.tsx — responsive header height and xl:inline secondary labels.
• app/src/components/DividerSwitch.tsx, Dropzone.tsx — center seam pill sizing and md:px-16 horizontal clearance.
• app/src/components/OptionsRow.tsx, CsvTable.tsx — 768px–1279px option cluster spacing, xl:block dividers, and selection strip wrapping.

Human author: David Boskovic ([email protected])

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

Test Evidence

Smaller-desktop loaded CSV state (768x700 to 1280x800): single-row 48px half-pane headers, xl:inline secondary labels, and clean OptionsRow

Smaller-desktop empty state (768x700 to 1280x800): unclipped 48px headers and zero DividerSwitch overlap with Dropzone paste box