Repository navigation
F9: Responsive pass — phones and tablets (#49) - #51
Merged
Merged
Conversation
added 2 commits
July 16, 2026 12:51
Spec KD-6 targets barn phones; 1.0 shipped desktop-only CSS. One media block under 700px, desktop untouched: - Topbar wraps: brand + sign-out on the first row, nav links wrap below with tap-sized padding. - Data tables become their own scroll containers (display:block + overflow-x) so wide tables scroll internally — the page never scrolls sideways. Dashboard panels get min-width:0 (flex refuses to shrink below table content otherwise) and stack full-width. - Form grids flow two-up; inline-form fields go full-width. - Primary actions (Save draft / Save & submit) become a sticky full-width bottom bar, one-thumb reachable per the mobile daily-entry wireframe. Verified in chromium at 390x844 and 768x1024: zero horizontal page overflow on dashboard/history/sales/flocks/daily-entry, and a real record + save-draft driven at both viewports. Closes #49
- Topbar wrapping moved out of the media query: it applies at every width, so there is no band just above the breakpoint where the 8-link nav can neither fit nor wrap (codex P2). Desktop is visually unchanged — the links fit one line there anyway. - Nav links sized to ~44px tap targets (WCAG 2.5.5); row-action .link buttons get a documented middle ground (40px min-height) — full 44px balloons the nowrap table rows they live in. (pi Med) - Cleanups (pi Low): dead -webkit-overflow-scrolling removed, no-op display:inline-block on flex children removed, redundant width:100% dropped in favor of the flex basis, .panel restated as flex: 1 1 100% instead of a longhand basis override. Verified with a viewport sweep (390/640/705/780/850/900/1024/1280): zero horizontal page overflow everywhere; nav wraps to two rows below ~850px and stays single-row above.
Owner
Author
Review round: codex + pi
Re-verified after fixes with a programmatic viewport sweep (390/640/705/780/850/900/1024/1280): zero horizontal page overflow at every width. |
This was referenced Jul 16, 2026
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.
Closes #49. Spec KD-6/wireframes require barn-phone usability; 1.0 shipped desktop-only CSS. Offline capture stays #50 (Phase 1.5).
What
Single
@media (max-width: 700px)block — desktop untouched, no markup changes:table.databecomes its own horizontal scroll container — the page body never scrolls sideways. Dashboard panels getmin-width: 0(flex children otherwise refuse to shrink below table content — found live: 118px page overflow at 390px) and stack full-width.Verification (chromium, real stack)
Programmatic overflow assertion (
scrollWidth − clientWidth) at 390×844 and 768×1024 across dashboard, history, sales, flocks, daily entry — 0px everywhere after the panel fix. Real daily-entry record + save-draft driven at both viewports. Screenshots below-worthy: nav wraps cleanly, dashboard stacks single-column, sticky action bar on daily entry.