Problem:
artifacts/tx-os/src/pages/executive-meetings-print.tsx built the schedule
as one monolithic <table> with fixed percentage widths (8/32/40/20), no
min-width / overflow guard, no word-break rules, and joined every
attendee into a single comma-separated string. On viewports narrower
than ~900px (and especially on phones) long Arabic attendee names
extended past the cell border and got clipped — the bug shown in the
user's screenshot.
Approach (artifacts/tx-os/src/pages/executive-meetings-print.tsx only):
1. Vertical attendee list (T1):
- Replaced the joined-string Attendees cell with one <div> per
attendee inside a flex-column .em-print-attendees wrapper.
Numbered "1- Name", "2- Name (Title)" etc. — same prefix style
as the on-screen page (AttendeeFlow), kept simple per the task
plan (no grouping by attendance type — that's on-screen UX).
- Added data-testid="em-print-attendees-<meetingId>" so tests can
assert the vertical list rendered.
2. Cell wrap protections (T1):
- .em-print-table th, .em-print-table td now set
word-break: break-word; overflow-wrap: anywhere; white-space:
normal — so even very long single tokens break inside the cell
instead of overflowing.
3. Screen scroll guard + responsive widths (T2):
- Wrapped the <table> in a div.em-print-scroll with
overflow-x:auto, -webkit-overflow-scrolling:touch.
- Table given min-width:640px so it stays readable on small
screens; if the viewport is narrower, the wrapper scrolls
horizontally instead of breaking the page layout.
- Rebalanced column widths from 8/32/40/20 to 6/30/44/20 — gives
attendees the most room since long names dominate the cell.
4. Print-mode overrides (T2):
- @media print resets .em-print-scroll overflow to visible,
.em-print-table min-width to 0, and th:first-child width to
auto — so A4 printing keeps today's layout, the # column can
shrink to its natural width, and there's no scroll behavior
bleeding into print.
5. Scope hygiene (T3):
- Did NOT touch executive-meetings.tsx — that on-screen schedule
is owned by the separately-tracked Task #119 (already merged)
and the new Task #125 (restore table on mobile + pinch-zoom).
The diff for this task is exactly one file plus this commit
message.
Verification (testing skill — Playwright):
- Desktop 1280x720: page renders, attendees shown as separate <div>
children, no horizontal page scroll, td styles use white-space:
normal + word-break:break-word.
- Phone 360x800: no horizontal PAGE scroll; the .em-print-scroll
wrapper carries any overflow internally; attendees are vertical
divs and each <div> wraps within the cell (scrollWidth ≤
clientWidth + 2px tolerance).
- Tablet 768x1024: no horizontal page scroll (viewport ≥ table
min-width).
- Print emulation (tablet + phone): .em-print-scroll computed
overflow-x === "visible", .em-print-table computed min-width ===
"0px" — A4 layout preserved.
- Architect review: PASS, no blocking issues.
Out of scope (per task brief):
- Real PDF generation (Task #111).
- The on-screen schedule layout (Tasks #119 / #125).
- Data model, columns, theme, RBAC.
riyadhafraa
3994ccdb0c
