Wrap wide editor tables instead of scrolling them - #1776
Open
AnotherDork wants to merge 3 commits into
Open
Conversation
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>
Contributor
Author
Contributor
Author
|
@gearnode it would seem it needs rerunning after i update branch :D |
Contributor
Author
|
@gearnode i cant add you as a reviewer anymore, im guessing that's on purpose :D |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Wide tables in documents can only be read by scrolling sideways.
.tiptap tableiswidth: max-content, so a table wider than the editorcolumn never wraps its cells;
.tableWrapper'soverflow: autoturns it intoa horizontal scroll instead. It shows up on any long-form document whose
tables carry no
colwidthattributes -- prosemirror-tables only writes aninline table width once every column in the first row has an explicit width
(
updateColumnsOnResizekeepsfixedWidthtrue only in that case), so untilthen the stylesheet's
max-contentwins.Adding
max-w-fullcaps the table at the container width. Narrow tables keeptheir
max-contentwidth, wide ones wrap, and a cell containing anunbreakable token still degrades to the wrapper's scrollbar.
Verified in headless chromium at an 800px column:
Also ran the
lint-jsjob locally (@probo/skillsvalidate,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-1max-w-fullto the.tiptap tablerule inpackages/ui/src/rich-editor.cssalongsidew-max.Written for commit 83aa6c3. Summary will update on new commits.