Problem:
The Executive Meetings schedule table used `tableLayout: "fixed"` with
hard-coded column widths totalling ~1100px (number 56 + meeting 320 +
attendees 600 + time 120). On any phone or iPad portrait this forced a
horizontal scrollbar and clipped attendee text.
Approach (artifacts/tx-os/src/pages/executive-meetings.tsx):
1. Added a small useMediaQuery hook (matchMedia listener with cleanup,
guarded for SSR).
2. ScheduleSection now renders TWO views with CSS-based switching so
nothing depends on JS state for visibility:
- Mobile cards container: className "md:hidden print:hidden",
data-testid="em-schedule-cards". Stacked cards with number badge,
title/location, time, and attendees. Same row-color background.
- Tablet/desktop table container: "hidden md:block print:block".
Always shown for print regardless of viewport.
3. Within the table:
- className now "table-auto xl:table-fixed print:table-fixed".
Tailwind classes alone control whether widths are enforced.
- <colgroup> + per-cell widths are emitted unconditionally so the
same widths apply at xl screens AND in print at any viewport. In
`table-auto` mode (md..<xl screens), browsers treat them as
hints and shrink columns to fit, so no horizontal scroll.
- Resize handles are screen-only (`isXl &&`); they need viewport-
driven layout to work and would just block touch scrolling.
4. MeetingRow now always provides width + overflow:hidden inline.
With break-words on the inner divs, wrapping behavior remains
correct under both layout modes.
5. New MeetingCard component for the mobile layout: number badge,
title/location, time, attendees in a stacked layout, with the
row-color background and a touch-friendly always-visible color
picker (RowColorPickerInline). The Columns customizer still gates
which fields appear via visibleColumns.some(...).
6. Refactored RowColorPicker into a shared RowColorPickerSwatches
body plus two trigger variants:
- RowColorPicker: original hover-only absolute trigger for the
table number cell (testid em-row-color-trigger).
- RowColorPickerInline: always-visible trigger for cards (testid
em-row-color-trigger-inline).
Verification (testing skill):
- Screen layout at 1280, 1440, 768, 390 px: PASS
- Desktop: table visible, em-schedule-cards hidden.
- Tablet 768: table visible, NO horizontal scroll on body.
- Phone 390: cards visible, table hidden, NO horizontal scroll.
- Print fidelity at sub-xl viewports (768 and 390): PASS
- getComputedStyle(table).tableLayout = "fixed" (print:table-fixed
takes effect at any viewport).
- First column header width ≈ 56px (configured "number" width)
confirms colgroup widths are honored in print at narrow widths.
- Print-only header visible, table visible (print:block),
em-schedule-cards hidden (print:hidden).
- First architect review caught a print-fidelity regression
(previous draft gated colgroup on isXl); fixed by removing all
isXl gating from the widths and letting CSS classes alone govern
layout mode. Re-tested and verified.
Out of scope (per task brief):
- The dedicated print artifact (executive-meetings-print.tsx) —
owned by Task #120.
- Data model, API, columns, theme/colors.
Riyadh
aa01ec0d12