On mobile/narrow screens, tables break words onto a newline if the content is too narrow to fit on screen. This conflicts with the .table-container having overflow-x: set to auto, as instead of allowing the table to stretch and add a horizontal scroll-bar, Quartz will preferentially break words up, splitting part of a word onto a new line in order to fit it in a smaller space.
Example:
The table header words 'Markdown' and 'equivalent' get split onto a new line on mobile
Cause:
Line 33 of Quartz base.scss contains the following CSS:
The use of overflow-wrap: anywhere for td and tr causes words in tables to break if they overflow the container.
Solution:
If td and tr have overflow-wrap instead set to normal, tables render correctly. Words that are too long get hyphenated where appropriate, but are not broken unnecessarily. Tables stretch more, allowing the use of the overflow scroll. Words do not overflow outside of the table cells; the cells stretch appropriately.
Description:
On mobile/narrow screens, tables break words onto a newline if the content is too narrow to fit on screen. This conflicts with the
.table-containerhavingoverflow-x:set toauto, as instead of allowing the table to stretch and add a horizontal scroll-bar, Quartz will preferentially break words up, splitting part of a word onto a new line in order to fit it in a smaller space.Example:
The table header words 'Markdown' and 'equivalent' get split onto a new line on mobile
Cause:
Line 33 of Quartz
base.scsscontains the following CSS:The use of
overflow-wrap: anywherefortdandtrcauses words in tables to break if they overflow the container.Solution:
If
tdandtrhaveoverflow-wrapinstead set tonormal, tables render correctly. Words that are too long get hyphenated where appropriate, but are not broken unnecessarily. Tables stretch more, allowing the use of the overflow scroll. Words do not overflow outside of the table cells; the cells stretch appropriately.Details:
The problem was observed in the Morrowind Modding Wiki Quartz repository. It was fixed there by commit 2f7587f
Desktop (please complete the following information):
nodeVersion: v20.11.1npmversion: v10.2.4Screenshot of the fixed table: