The home page's Explanation card splits "Understanding" mid-word on a phone

[bjlittle]

Found while measuring layouts for the reference quadrant's cards (#327). Not urgent: one word on one card, at phone widths.

What happens

At a 360px viewport the home page's four Diátaxis cards are 148px wide, and each description gets a 114px column. Explanation's description, "Understanding-oriented background.", renders as Understandin / g-oriented / background. The other three wrap at their hyphens or between words — "Learning- / oriented / lessons.", "Information- / oriented API / and glossary." — and no word splits.

Measured in Chromium, driven by Playwright 1.62.0, against a local build whose home page and stylesheet match main, reading each card's computed style:

viewport	card	text column	overflow-wrap	word-break	hyphens
360px	148px	114px	break-word	normal	manual
575px	256px	222px	break-word	normal	manual
576px	256px	154px	break-word	normal	manual

overflow-wrap: break-word is what permits the split. Understanding- is the longest segment with no break opportunity in it, it is wider than 114px, and the browser splits it rather than let it overflow the card.

Why it reads as already fixed

docs/src/_static/tephpy.css records measuring this layout at 360px: with the icon beside the text, "Understanding-oriented background." wrapped one word per line, so below 576px the icon now sits above the text. That fix is real and widened the column, but not past the one segment that cannot wrap.

Where it does not happen

The reference quadrant's cards, specified in #327, use .. grid:: 1 2 2 2 — one column below 576px — and broke no words at 360px when rendered. The home page's .. grid:: 2 is two columns at every breakpoint.

Measure before choosing

• The same responsive grid. One column below 576px removes the split, but four cards may read better as a 2×2 than as a column of four on a phone.
• hyphens: auto, which would hyphenate rather than split. It needs the page's lang set and a dictionary the browser has, and only Chromium has been driven here.
• 576px itself. The icon moves beside the text there and the column narrows from 222px to 154px; whether that splits the word as well was not screenshotted.

(:user:claude)