docs: improve table responsiveness on narrow screens (closes #1359) - #1749
docs: improve table responsiveness on narrow screens (closes #1359)#1749aniruddhaadak80 wants to merge 1 commit into
Conversation
…able#1359) Add word-wrap and overflow-wrap to table cells in the differences guide so long text wraps properly on narrower screens instead of overflowing. Also set min-width on cells to prevent overly narrow columns.
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
|
@aniruddhaadak80 Thank you very much for taking the time to prepare the pull request. There's one thing holding us back from using those changes in production — could you please sign the CLA: https://cla.handsontable.com/sign?pr=handsontable%2Fhyperformula%231749 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want higher recall? High effort reviews run extra passes and find more bugs. A team admin can switch effort levels in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit b8761e7. Configure here.
| word-wrap: break-word; | ||
| overflow-wrap: break-word; | ||
| min-width: 100px; | ||
| } |
There was a problem hiding this comment.
Table cell wrapping ineffective
Medium Severity
overflow-wrap: break-word and white-space: normal only wrap when a cell already has a bounded width. These tables use display: block with horizontal scrolling, so columns still size to content. min-width: 100px sets a floor, not a ceiling, so long descriptions keep expanding the table and the narrow-screen overflow issue remains.
Reviewed by Cursor Bugbot for commit b8761e7. Configure here.
1 participant
What Problem This Solves
The "List of differences with other spreadsheets" guide has a very wide table with long text in each cell that overflows on narrower screens, making it hard to read. Issue #1359 reports that while the built-in functions guide scales well, the differences guide doesn't.
Why This Change Was Made
The existing CSS makes tables horizontally scrollable but doesn't handle text wrapping in cells. When table cells contain long descriptions (as in the "General functionalities" section), the text extends beyond the viewport width.
What Changed
Added CSS rules to
list-of-differences.mdthat:white-space: normalon table cells to allow text wrappingword-wrap: break-wordandoverflow-wrap: break-wordfor long wordsmin-width: 100pxon cells to prevent overly narrow columnsHow Tested
Fixes #1359
Note
Low Risk
Documentation-only CSS on a single guide page; no runtime or API impact.
Overview
Fixes narrow-screen readability on the List of differences guide (#1359) by extending the existing
widePageCSS so wide comparison tables wrap cell text instead of forcing horizontal overflow.New rules target
tdandthunder.page:has(.widePage):white-space: normaloverrides nowrap defaults,word-wrap/overflow-wrap: break-wordsplit long tokens, andmin-width: 100pxkeeps columns from collapsing too far. Horizontal scrolling on the table block is unchanged when content still exceeds the layout.Reviewed by Cursor Bugbot for commit b8761e7. Bugbot is set up for automated code reviews on this repo. Configure here.