Step 4: Implementation Summary — Board List Column Reflow

Stage 1 - Board From/Date column width fix

• Changes:

  • templates/partials/paned_board_thread_list.php: added a data-paned-board-list-pane attribute to the outer .paned-list-pane div, following the same scoping precedent already used for Users (data-paned-users-list-pane), so Board-only CSS overrides don't leak into Activity (which shares the base .paned-list-from/.paned-list-date classes).

  • public/assets/forte.css: added [data-paned-board-list-pane] .paned-list-from-head/.paned-list-from { width: 7rem; } and .paned-list-date-head/.paned-list-date { width: 8rem; }, overriding the base 9rem/13rem fixed widths for Board only.

• Verification:

  • php -l on the template — no syntax errors.

  • Started a throwaway local server on 127.0.0.1:8010 (stopped after verification) and used Playwright to screenshot/measure /forte at desktop (1280px), half-wide (700px), and narrow (400px) viewports.

  • Desktop/half-wide: From/Date columns visibly tighter (7rem+8rem = 15rem vs the old 9rem+13rem = 22rem), freeing ~7rem (~112px) to Subject; "5 minutes ago" (the longest common relative string) renders in full, no truncation.

  • Narrow (400px): Subject still squeezes to a single-line sliver, same as before this change — confirmed not worse, this is the pre-existing bug tracked separately under forte_mobile_friendly_step1_solution_assessment.md.

  • Confirmed no page-level or pane-level horizontal overflow at any of the three widths (document.documentElement.scrollWidth === window.innerWidth).

• Notes:

  • Approach pivot during implementation, documented for future reference. Step 1/3 chose "size From/Date to their actual content" (Option B), but that turned out to be unachievable with plain flexbox width rules: .paned-list-head and each .paned-list-row are independent flex containers (siblings), so a per-row content-sized column computes its width independently per row, breaking column alignment down the list.

  • Tried switching just Board's list (via the same data-paned-board-list-pane scoping) to a CSS table (display:table/table-row/table-cell), which does share column-width computation across all rows. This fixed alignment but caused two regressions, found via the same Playwright measurement approach:

    1. The base .paned-list-row { white-space: nowrap; } rule, safe under flexbox (paired with overflow:hidden;text-overflow:ellipsis on Subject), became unsafe under table auto-layout: nowrap content sets a column's minimum width to its full single-line text, so a long subject line ballooned the whole table width, pushing Date/Replies/Score off-screen. Fixed by letting Subject wrap (white-space:normal), which surfaced regression 2.

    2. At narrow (400px) width, with limited leftover space, Subject wrapped character-by-character (one letter per line) instead of flexbox's single-line truncated sliver — worse than the pre-existing narrow-width bug it was supposed to not worsen.

    3. Separately, display: table as a flex item didn't respect the pane's flex: 1 1 40%; min-height: 0 constraint the way a block/flex box does — the list pane expanded to its full ~13,600px content height instead of staying clipped, pushing the content pane thousands of pixels below the fold (reported directly by the user as "the third pane is off-screen").

  • A real fix for the table approach exists (wrap the table in an additional block-level scrollable container, since a table itself doesn't reliably respect flex-basis height) but requires a new template-level wrapper element, which is more invasive than the "CSS-only" scope this stage was approved for. Reverted to the fixed-width fallback (this stage's actual shipped change) instead, per the user's explicit fallback instruction.

  • .paned-list-replies/.paned-list-score widths were left untouched (already 5rem, not part of the reported complaint).