"overflow-wrap: anywhere" is problematic in table cell code blocks

[boneskull]

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:

| 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                                    |

Suggestion:

Something like

.sl-markdown-content :is(th, td):not(:where(.not-content *)) > code {
  overflow-wrap: normal;
}

...and whatever CSS is needed to except pre > code from the rule.

Link to Minimal Reproducible Example

n/a

Participation

• I am willing to submit a pull request for this issue.

[delucis]

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.)

[boneskull]

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)

[rehanvdm]

+1

For now I'm specifying a min-width for all columns with global CSS, not a good solution but works for the time being

th, td {
    min-width: 100px;
}

[angelikatyborska]

I ran into this issue in my own Starlight project. I decided to solve it by changing overflow-wrap: anywhere to overflow-wrap: break-word so that words only get broken if there is no more whitespace on the line that could have been wrapped instead.

Maybe Starlight could adopt that fix?

[delucis]

Maybe Starlight could adopt that fix?

Good shout @angelikatyborska! I did a few tests and I think you’re right that that might be a better default because of how break-word avoids impacting calculation of implicit sizing, which helps the <table> case in particular.

I think we could update it here if someone’s interested in making a PR?

starlight/packages/starlight/style/reset.css

Line 44 in 98422e2

overflow-wrap: anywhere;

[erbierc]

I'll take it