"overflow-wrap: anywhere" is problematic in table cell code blocks about starlight HOT 2 OPEN

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

from starlight.

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)

from starlight.