fix(web): wide markdown tables scroll internally and break out on desktop - #1577
Conversation
🦋 Changeset detectedLatest commit: e000e33 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
commit: |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 39415666dd
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| const barRect = bar.getBoundingClientRect(); | ||
| const tocRect = toc.getBoundingClientRect(); | ||
| const x = barRect.left + barRect.width / 2; | ||
| const y = tocRect.top + tocRect.height / 2; |
There was a problem hiding this comment.
When the outline has several entries and a short wide table scrolls under only the top or bottom part of the rail, this single midpoint hit-test stays false until the table reaches the rail center. During that interval the visible TOC rows/hover bridge still sit above the table and can intercept clicks, text selection, or horizontal scrolling on the overlapped portion, which defeats the occlusion behavior this code adds; check the rail/row area rather than only tocRect's center.
Useful? React with 👍 / 👎.
|
Codex Review: Didn't find any major issues. Nice work! Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
1 participant
Related Issue
None — the problem is explained below.
Problem
Wide markdown tables in the web chat were squeezed into the 760px reading column: many-column tables were compressed into unreadably narrow cells, and there was no good way to view them. On desktop the reading column is also narrower than typical data tables need, and simply letting a table break out would collide with the conversation outline (TOC) that sits beside the message stream.
What changed
Stage 1 (first commit): wide tables scroll horizontally inside their own wrapper — the wrapper stays pinned to the message width with
overflow-x: auto, while the table keeps its natural content width. The chat pane and the page never scroll sideways.Stage 2 (second commit), built on top of stage 1:
--p-table-max: 1040pxtoken, centred within the conversation pane via a container query on the existing.coninline-size container; anything wider keeps scrolling inside the table wrapper. Narrow tables still fill exactly the reading column, and the wrapper is capped by100cqiso it shrinks automatically when the sidebar or preview resizes. No ResizeObserver / JS sizing is involved.content-visibility: autois disabled only for renderers that actually contain a table, so paint containment cannot clip a table that breaks out.ConversationPane(document.elementsFromPointat the fixed.toc-bar, accepted only when a.table-node-wrapperinside this pane covers it) hides the TOC only while a table actually passes under the rail, and restores it when the table scrolls away. The hit-test is scheduled from the existing scroll handler, MutationObserver, ResizeObserver, and rebind path — no new observers, no table enumeration. The user's TOC setting is never touched and nothing is written to localStorage.--p-table-maxtoken, wide-table rules, and the TOC occlusion behavior.Verification:
pnpm --filter @moonshot-ai/kimi-web typecheck,check:style,build, andgit diff --checkall pass. Runtime acceptance (narrow/medium/20+-column tables, TOC hide/restore, sidebar/preview resize, streaming tables, mobile) is manual in the browser; this package has no component-test harness.Checklist
gen-changesetsskill, or this PR needs no changeset.gen-docsskill, or this PR needs no doc update.