Table border wider than inner grid below 50rem

Symptom

On viewports below 50rem, a table's outer box (border + radius) spans the full content width, while the actual columns stop short of the right edge. Visible on /reference/kitchen-sink/ → Supported providers.

Cause

packages/starlight/src/styles/components.css sets display: block; width: 100%; overflow-x: auto on the <table> so a 4-column table's 40rem minimum scrolls locally instead of widening the page.

display: block sizes the element box (where the border lives). thead / tbody stay a real table and size to the 10rem cell minimums. When the viewport is < 50rem but wider than columns × 10rem (a 3-column table only needs 30rem), the box is full width and the grid is not.

Fix when we pick this up

Either:

.sl-markdown-content table :is(thead, tbody) {
  display: table;
  width: 100%;
}

or wrap the table in a dedicated scroller and keep the table as display: table; width: 100%.

Do not drop the 10rem cell minimums — that crushes 4-column tables on phones.

Related

PR https://github.com/nebari-dev/starlight/pull/27 (mobile page-scroll vs table-scroll).

Start with packages/starlight/src/styles/components.css and reproduce the Supported providers table on /reference/kitchen-sink/ below 50rem. Compare the outer border with the inner grid at different column counts, then verify the chosen fix preserves the 10rem cell minimums and keeps the grid aligned with the table border without widening the page.