m/projax
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): mobile polish — Tiles tab strip wraps, touch-target sizing

Browse Source 
Phase 5h slice 7 — adds mobile-tier rules to the Phase 5h dashboard
chrome (Tiles tab strip + scope chip + tiles + Events day heading)
that match the Phase 3i mobile conventions (44px touch targets,
horizontal-scroll-able strips, wrap-friendly layouts).

≤ 768px tier:
- .dash-tabs wraps so 3 tabs + the scope chip never push past viewport.
- .dash-tab grows to 8x12 padding for thumb taps.
- .dash-scope-chip drops to its own row (flex-basis:100%) with
  centered alignment — auto-margin right-align is meaningless when
  wrapped.
- .tile padding tightens to 10x12; .tile-head gap narrows.
- .tile-pin button gets a 36px min target (we don't push to 44 here
  because it'd unbalance the header row; star is still tappable).
- .tile-live live-link gets 32px min target.
- .dash-quiet-summary fold-toggle has 12px vertical padding so the
  hit area is bigger than the text glyph.
- Events tab .event-day-heading wraps; event count drops below the
  label + date for legibility.

No HTML / template changes — pure CSS slice. All web/ tests stay green.
This commit is contained in:
mAi
2026-05-26 12:36:22 +02:00
parent fee3251946
commit a46f73f568
1 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/static/style.css
View File

@@ -549,6 +549,30 @@ table.bulk .chip-add-btn:hover { background: var(--accent); color: var(--accent-
}
.dashboard .task-row .check button { padding: 8px 14px; }
/* Phase 5h — Tiles dashboard mobile polish.
Tab strip wraps gracefully and the scope chip drops to its own row
(the auto margin still right-aligns it within the wrapped flow).
Tile padding tightens; tile-pin and tile-live buttons get touch
targets that match the rest of the mobile button budget. */
.dashboard .dash-tabs { flex-wrap: wrap; gap: 2px; }
.dashboard .dash-tab { padding: 8px 12px; font-size: 0.9em; }
.dashboard .dash-scope-chip {
flex-basis: 100%; text-align: center; margin-left: 0; margin-top: 4px;
padding: 8px 12px;
}
.dashboard .tile { padding: 10px 12px; }
.dashboard .tile .tile-head { gap: 6px; }
.dashboard .tile .tile-pin {
font-size: 1.25em; padding: 4px 6px; min-height: 36px; min-width: 36px;
}
.dashboard .tile .tile-live { min-height: 32px; padding: 4px 10px; }
/* Quiet fold summary needs a tappable hit area. */
.dashboard .dash-quiet > summary.dash-quiet-summary { padding: 12px 0; }
/* Events tab on mobile: day headings drop the right-aligned count
onto its own line for legibility. */
.dashboard .dash-events-view .event-day-heading { flex-wrap: wrap; gap: 6px; }
.dashboard .dash-events-view .event-day-count { margin-left: 0; flex-basis: 100%; }
/* Detail page edit form — single column. */
.edit, .promote, .inline-promote { grid-template-columns: 1fr; }