Scope Portal news table scrolling to tables

Context

Follow-up from #12328 / PR #12330. That PR correctly added table borders/header styling for Portal news timeline Markdown tables, but the UX tradeoff is still wrong for wide tables: overflow-x: auto currently sits on the whole .neo-timeline-body, so prose, headings, and the timeline bubble body participate in horizontal scrolling when only the table needs extra width.

Operator UX challenge, 2026-06-02: table content can be wider than the timeline item; the nicer behavior is for just the table to scroll horizontally while the timeline item and surrounding prose stay fixed. Follow-up refinement: individual table columns should also have a sane max width, so a single 500-character cell wraps instead of forcing a huge horizontal run.

Duplicate sweep:

• Knowledge Base ticket search for Portal news Markdown tables horizontal scroll table wrapper timeline body found no equivalent Portal-news table-scroll issue.
• Local resources/content/issues / resources/content/discussions sweep for table scroll, timeline table, Markdown table, and neo-timeline-body found only unrelated docs-table issues (#11719, #12109) and no Portal news UX ticket.

The Problem

Whole-body horizontal scrolling makes the timeline item feel structurally wider than the available column. It also couples unrelated Markdown content to a table-specific overflow case. The desired UX is the same shape used for images: wrap only the wide content type in a scroll container.

There are two width cases to handle:

1. A genuinely wide table with many columns should scroll inside the table region.
2. A table with a single extremely long cell should wrap within a column max width instead of making the table thousands of pixels wide.

The Architectural Reality

• src/component/Markdown.mjs:554-557 already post-processes parsed HTML and wraps raw <img> tags in .neo-markdown-image-wrapper.
• resources/scss/src/component/Markdown.scss:145-175 owns baseline Markdown table styling for > table, but does not provide a table-specific scroll wrapper or column max-width policy.
• Portal news timeline comments bypass the core setHtml() post-processing in some direct marked.parse() paths:
  • apps/portal/view/news/tickets/Component.mjs:346-357 parses timeline comments and injects the result into .neo-timeline-body.
  • apps/portal/view/news/discussions/Component.mjs:363-399 parses discussion comments and replies directly.
  • apps/portal/view/news/pulls/Component.mjs:221-226 parses PR comments/reviews directly before renderBubble().
• resources/scss/src/apps/portal/news/tickets/Component.scss:238-263 currently places overflow-x: auto on .neo-timeline-body and makes tables width: max-content.

The Fix

Introduce a table-specific wrapper for rendered Markdown tables and move the horizontal overflow behavior onto that wrapper:

1. Add a reusable helper on Neo.component.Markdown (or an equivalent local helper if the shared class cannot be reused safely) that wraps parsed Markdown <table> elements in a scroll container, e.g. .neo-markdown-table-wrapper.
2. Apply that helper to both the core Markdown render pipeline and the Portal news direct marked.parse() timeline paths for tickets, discussions, and pulls.
3. Update SCSS so .neo-timeline-body remains fixed-width while .neo-markdown-table-wrapper scrolls horizontally.
4. Keep frontmatter tables out of the wrapper unless they are actually produced by Markdown parsing; generated frontmatter tables should keep their existing compact behavior.
5. Add a column max-width / wrapping policy for Markdown table cells, so long single-cell content wraps before it creates a page-scale horizontal scroll.

Contract Ledger Matrix

Decision Record impact

none — narrow Portal/content rendering UX fix; no ADR impact expected.

Acceptance Criteria

• Parsed Markdown tables render inside a table-specific wrapper such as .neo-markdown-table-wrapper.
• .neo-timeline-body no longer owns horizontal table overflow; only the table wrapper scrolls horizontally for wide tables.
• Table cells have a responsive max-width / wrapping policy so very long single-cell content wraps instead of forcing page-scale horizontal scroll.
• Tickets, discussions, and pull-request timeline bodies all use the same wrapper behavior, including direct marked.parse() comment/reply paths.
• Generated .neo-frontmatter-table output is not double-wrapped and keeps its existing compact styling.
• Visual/runtime evidence covers a Portal news timeline item containing a wide Markdown table and a long-cell table; surrounding prose and the timeline item remain fixed while only the table region scrolls when needed.
• Theme build passes and the shared table styling still uses existing light/dark --gh-* / Markdown table tokens without introducing new theme variables.

Out of Scope

• Replacing marked or changing the Markdown grammar.
• A global table-design redesign beyond the wrapper/overflow/column-width behavior.
• Changing frontmatter table layout or summary-list avatar behavior.

Avoided Traps

• CSS-only table { display: block; overflow-x: auto; } is possible but weaker: it changes table display semantics and can disturb column layout. A wrapper preserves native table layout and scopes overflow to the content type.
• Moving overflow to the timeline item/card is rejected because it makes unrelated prose and timeline chrome feel horizontally scrollable.
• Letting one long unbroken value set the table width is rejected; a column max-width with wrapping is better for scanability.

Related

• #12328 / PR #12330 — added Portal news timeline Markdown table styling.

Origin Session ID: 53179687-64cf-4ca1-9a42-30455724ec68

Handoff Retrieval Hint: query_raw_memories("Portal news timeline Markdown table wrapper overflow only table scroll #12330")