Repository navigation
fix(mobile): polish small-screen stacked panes, in-flow seam, compact headers, and collapsible options - #222
Merged
obvious-autobuild-staging[bot] merged 6 commits intoOct 17, 2026
Conversation
… mobile seam in flow Co-authored-by: David Boskovic <[email protected]>
… bar, and feedback popout Co-authored-by: David Boskovic <[email protected]>
…elog #14, and rebuild dist Add unit and component tests covering stacked-pane minimum heights, in-flow mobile seam ordering, collapsible mobile OptionsRow disclosure with preserved initial-DOM options/hints, small-screen FeedbackVote popover anchoring, and compact mobile header action labels. Add bundled changelog entry #14 and rebuild app/dist. Co-authored-by: David Boskovic <[email protected]>
Ensure app/dist matches a clean npm run build output byte-for-byte. Co-authored-by: David Boskovic <[email protected]>
… in-pane Add max-md:max-h-[360px] on pane-left and max-md:max-h-[340px] on pane-right so multi-line JSON documents scroll inside the stacked mobile panes rather than expanding the page vertically. Co-authored-by: David Boskovic <[email protected]>
Ensure Copy and Download read currentValidOutput (matching displayedOutput) rather than the effect-lagged lastValidOutput state so immediate exports after conversion or upload never read a stale or null value. Co-authored-by: David Boskovic <[email protected]>
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
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.
Why
On narrow viewports (
<768px), the converter shell clamped both stacked panes plus the top bar, launch banner, and options bar inside a fixed100svhcolumn withoutoverflow-hiddenor minimum pane heights. As a result,DropzoneandCsvTablebled across the seam, the floatingDividerSwitch(⇄ CSV → JSON) overlapped table rows and the output header, theInputPaneaction buttons wrapped to 3 rows (103.5px), and the multi-rowOptionsRowconsumed a third of a375×667screen.What
App.tsx,SplitPane.tsx): Useflex min-h-svh flex-col md:h-svh md:min-h-0on the converter column and addoverflow-hidden+ responsive minimum heights (max-md:min-h-[280px]onpane-left,max-md:min-h-[240px]onpane-right) while preserving desktop's exact100svhsplit-screen layout and all CSS-firstSplitPaneinvariants.SplitPane.tsx): Placedata-testid="seam"betweenpane-leftandpane-rightin the DOM as arelative h-9flex row on<md(md:absoluteon desktop) soDividerSwitchnever overlaps table rows, the search bar, or theOutputPaneheader on mobile.PaneShell.tsx,InputPane.tsx,Dropzone.tsx,FeedbackBanner.tsx): Hide secondary text labels (Upload,Copy,Clear,Download) on<smwhile keepingaria-labelandtitleon the buttons so the375pxheader stays on one compact row; tighten mobilePaneShell,Dropzone, andFeedbackBannerspacing.OptionsRow(OptionsRow.tsx): Add a<mddisclosure bar (data-testid="options-mobile-toggle",aria-expanded) with an active-options summary badge that hides the option controls withmax-md:hiddenwhen collapsed while keeping every option control anddata-hintnode mounted in the initial DOM forverify-seo.sh.FeedbackVotepopout (FeedbackVote.tsx): MatchChangelogButtonwithmax-sm:staticon the wrapper andmax-sm:inset-x-2 max-sm:top-14 max-sm:w-autoondata-testid="feedback-popover".#14(entries.ts) & rebuiltapp/dist.How to Review
app/src/App.tsx&app/src/components/SplitPane.tsx: stacked pane layout,overflow-hidden, and in-flow<mdseam vsmd:absolutedesktop seam.app/src/components/OptionsRow.tsx: mobile disclosure toggle (options-mobile-toggle) and CSS-only visibility (max-md:hidden) preserving initial-DOM SEO invariants.app/src/components/InputPane.tsx,PaneShell.tsx,Dropzone.tsx,FeedbackBanner.tsx,FeedbackVote.tsx: small-screen compaction and popout anchoring.Human author: David Boskovic ([email protected])
🔗 Obvious Project · 🧵 Obvious Thread · 🔀 Obvious PR Artifact
Test Evidence
AC-8: Mobile & small-screen layout (<768px) stacked panes, in-flow seam, compact headers, collapsible options, and 1280x800 desktop parity
AC-8: Mobile & small-screen layout (<768px) stacked panes, in-flow seam, compact headers, collapsible options, and 1280x800 desktop parity — recording