Skip to content

Wrap wide editor tables instead of scrolling them - #1776

Open
AnotherDork wants to merge 3 commits into
getprobo:mainfrom
AnotherDork:fix-rich-editor-table-wrap
Open

Wrap wide editor tables instead of scrolling them#1776
AnotherDork wants to merge 3 commits into
getprobo:mainfrom
AnotherDork:fix-rich-editor-table-wrap

Conversation

@AnotherDork

@AnotherDork AnotherDork commented Aug 25, 2026

Copy link
Copy Markdown
Contributor

Wide tables in documents can only be read by scrolling sideways.

.tiptap table is width: max-content, so a table wider than the editor
column never wraps its cells; .tableWrapper's overflow: auto turns it into
a horizontal scroll instead. It shows up on any long-form document whose
tables carry no colwidth attributes -- prosemirror-tables only writes an
inline table width once every column in the first row has an explicit width
(updateColumnsOnResize keeps fixedWidth true only in that case), so until
then the stylesheet's max-content wins.

Adding max-w-full caps the table at the container width. Narrow tables keep
their max-content width, wide ones wrap, and a cell containing an
unbreakable token still degrades to the wrapper's scrollbar.

Verified in headless chromium at an 800px column:

case before after
wide table 1738px, scrolls, one line tall 800px, no scroll, wraps
two-column narrow table 101px 101px, unchanged
cell with an unbreakable URL scrolls scrolls, fallback intact

Also ran the lint-js job locally (@probo/skills validate, make relay,
npm run lint, n8n node lint) plus a production console build.


Summary by cubic

Wide tables in the rich-text editor now wrap to the editor column instead of forcing a horizontal scroll. Previously tables used max-content and overflowed; now they’re capped to the container so cells wrap, narrow tables keep their size, and unbreakable content still scrolls via the wrapper.

Package: ui +1 -1

  • Add max-w-full to the .tiptap table rule in packages/ui/src/rich-editor.css alongside w-max.

Written for commit 83aa6c3. Summary will update on new commits.

Review in cubic

Document tables render at width:max-content, so a table wider than
the editor column never wraps its cells and can only be read by
scrolling .tableWrapper sideways. Documents imported with unset
colwidth attributes hit this for almost every table, because
prosemirror-tables only overrides the width inline once every
column has an explicit width.

Cap the table at the container width. Narrow tables keep their
max-content width, wide ones wrap their cells, and a cell holding
an unbreakable token still falls back to the wrapper's scroll.

Signed-off-by: Gren Paut <90505696+AnotherDork@users.noreply.github.com>
Copilot AI lite review requested due to automatic review settings August 25, 2026 13:37

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@AnotherDork

Copy link
Copy Markdown
Contributor Author

@gearnode

@AnotherDork

Copy link
Copy Markdown
Contributor Author

@gearnode it would seem it needs rerunning after i update branch :D

@AnotherDork

Copy link
Copy Markdown
Contributor Author

@gearnode i cant add you as a reviewer anymore, im guessing that's on purpose :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants