You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There's a style somewhere that sets overflow-wrap: anywhere -- probably across the markdown content. But this is problematic when the code block lives in a table cell and the code block is particularly short:
Source of the above:
| Name | Type | Default | Description || --------- | --------- | ------- | -------------------------------------------------------------------------------------------- ||`types`|`boolean`|`true`| Check the file referenced by the conditional `types` export has a `.d.ts` extension ||`require`|`boolean`|`true`| Check the file referenced by the conditional `require` export references a CommonJS script ||`import`|`boolean`|`true`| Check the file referenced by the conditional `import` export references an ECMAScript module ||`order`|`boolean`|`true`| Check the conditional `default` export is the _last_ field in its object ||`glob`|`boolean`|`true`| If `false`, disallow glob patterns in the `exports` field |
Thanks for the issue @boneskull and for your patience waiting for a reply!
This is a super tricky one (tables in general are to be honest 😅) and I’m honestly not 100% sure what the right answer is.
While your example template is definitely not pretty, consider another example where the second column value is a long code string. With the current styles, these wrap like this:
If we disable the overlow-wrap: anywhere for <code> inside tables, initially things seems quite OK:
But if we switch to a narrower viewport, I’m not so sure this is still better:
With overflow-wrap
Without overflow-wrap
Admittedly tables are close to impossible to display well on smaller screens, which is why in the Astro docs we aim to avoid them altogether and in Starlight’s docs we only have one, extremely narrow, two-column table.
So, I’m not sure what the right solution here is. Curious to hear further thoughts and suggestions though.
(EDIT: I accidentally closed the issue somehow while commenting, sorry, not my intention.)
What if we adjust the setting based on the viewport size?
If we expect users of Starlight to mainly produce technical documentation, developers read it. Developers are going to favor larger displays when developing (idk if you've ever tried to code anything on your phone, but even typing a few lines in a GH issue is painful). To that end, it seems like the desktop display should be favored over mobile when the two come to loggerheads. What do you think?
(I suppose this mainly concerns how code blocks get displayed, because that's really the thing that causes the conflict)
What version of
starlight
are you using?0.15.1
What version of
astro
are you using?4.0.8
What package manager are you using?
npm
What operating system are you using?
mac
What browser are you using?
chromium-based
Describe the Bug
There's a style somewhere that sets
overflow-wrap: anywhere
-- probably across the markdown content. But this is problematic when the code block lives in a table cell and the code block is particularly short:Source of the above:
Suggestion:
Something like
...and whatever CSS is needed to except
pre > code
from the rule.Link to Minimal Reproducible Example
n/a
Participation
The text was updated successfully, but these errors were encountered: