Skip to content

fix(build): restore 44px mobile tap targets on workspace artifact tabs (#1042) #1043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
developer-ainative merged 1 commit into from
Oct 9, 2026
Merged

fix(build): restore 44px mobile tap targets on workspace artifact tabs (#1042) #1043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion __tests__/app/modernist-mobile.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,31 @@ describe('modernist.css phone breakpoints (#334–#339)', () => {
})

it('#940 — dashboard act-bar wraps instead of overflowing at <=760px', () => {
expect(inBlock(760, /\.m-actbar\s*\{[^}]*flex-wrap:\s*wrap/)).toBe(true)
// #91: the outer wrapper this rule meant to target was renamed from
// .m-actbar to .m-journey-phases when components/build/JourneyBar.tsx
// merged the old separate ActBar + PathBreadcrumb components (its own
// doc comment says so) — confirmed live that .m-actbar no longer
// exists anywhere in the rendered DOM. The inner .m-acts/.m-actbar-right
// sub-rules below still match (they key off their own class names,
// untouched by the refactor) and keep working independently, but the
// outer wrap/padding rule needs the current selector to do anything.
expect(inBlock(760, /\.m-journey-phases\s*\{[^}]*flex-wrap:\s*wrap/)).toBe(true)
expect(inBlock(760, /\.m-acts\s*\{[^}]*flex-wrap:\s*wrap/)).toBe(true)
expect(inBlock(760, /\.m-actbar-right\s*\{[^}]*flex-wrap:\s*wrap/)).toBe(true)
expect(inBlock(760, /\.m-actbar-btn\s*\{[^}]*min-height:\s*44px/)).toBe(true)
expect(inBlock(760, /\.m-land-sound[\s\S]{0,40}\{[^}]*min-height:\s*44px|min-height:\s*44px[\s\S]*\.m-land-sound/)).toBe(true)
})

it('#91 — workspace artifact tabs (.m-crumb) hit the 44px tap-target floor at <=760px', () => {
// Real bug found live (2026-10-09 pre-summit mobile QA pass): .m-crumb
// (the "design system / product brief / product requirements / ..."
// breadcrumb buttons in JourneyBar.tsx — the primary way a founder
// switches between a build's 14 artifacts) measured ~24px tall on a
// 375px phone (getBoundingClientRect, confirmed against production),
// well under the 44px floor every other control on this same screen
// already respects (#339/#940). No media rule touched it at all.
expect(inBlock(760, /\.m-crumb\s*\{[^}]*min-height:\s*44px/)).toBe(true)
})
})

describe('accessibility fixes (2026-10-05 audit)', () => {
Expand Down
13 changes: 12 additions & 1 deletion app/modernist.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1810,7 +1810,13 @@
badges (the text labels add little at this width and are the single
biggest space cost), and let the right-side controls wrap internally
rather than widen the row past the viewport. */
.m-actbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 16px; }
/* #91: this targeted .m-actbar until the JourneyBar.tsx refactor (merging
the old separate ActBar + PathBreadcrumb components) moved the phase row
into a new .m-journey-bar > .m-journey-phases wrapper — .m-actbar no
longer exists in the rendered DOM, so this rule went dead while its
siblings below (.m-acts, .m-actbar-right, keyed off their own class
names) kept working. Retargeted to the real current wrapper. */
.m-journey-phases { flex-wrap: wrap; row-gap: 8px; padding: 8px 16px; }
.m-acts { flex-wrap: wrap; row-gap: 6px; }
.m-act-label { display: none; }
.m-actbar-right { flex-wrap: wrap; row-gap: 8px; margin-left: 0; }
Expand All @@ -1819,6 +1825,11 @@
never covered by that pass; confirmed live at 4px 10px / 11px font, well
under the floor). */
.m-actbar-btn { min-height: 44px; display: inline-flex; align-items: center; }
/* #91: .m-crumb (the artifact breadcrumb tabs — "design system / product
brief / product requirements / ..." — the primary way a founder switches
between a build's 14 artifacts) measured ~24px tall on a 375px phone,
confirmed live against production; no rule had ever covered it. */
.m-crumb { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 2x2 tablet layout for the 4-tier grid — a straight 4-col-to-1-col jump at
Expand Down
Loading