fix: prevent text from overflowing prev/next links

[julien-deramond]

What kind of changes does this PR include?

• Changes to Starlight code

Before the final merge if/when approved

• Remove 2cd86e9 which gathers the extra long texts added for testing purposes
  • ⚠️ This commit breaks pa11y-ci job temporarily

Description

This PR is a follow-up of #756 where we decided to extract this fix for prev/next links in a separate PR. We agreed at the time that the suggested fix wasn't good enough because relying on media queries and values that don't exist already as media queries in Starlight (see discussion from #756 (comment)).

A possible simple fix would have been to use media containers because what we really want is a specific rendering based on the size of the container but the browsers' support is not yet good enough.

So I had to rely on some advanced features of display: grid often used to create complex layouts.

The following code already existed and worked well for the rendering of each pagination item.

a {
  flex-basis: calc(50% - 0.5rem);
  flex-grow: 1;
}

Since we are playing with auto layouts and sizes, the icon size can sometimes be reduced (or the icon can "disappear"), so the following allows us to keep the same size for the icon:

svg {
  flex-shrink: 0
}

The most complex part is definitely the following:

.pagination-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

The grid-template-columns property defines the columns of the grid. The repeat(auto-fit, minmax(200px, 1fr)) value means that the grid will automatically create as many columns as it can fit in the available space, with a minimum width of 200px and a maximum width of 1fr (which means the columns will take up equal space).
If I say it differently, the pagination item will take the whole space until there's enough space to render two 200px pagination items on the same row.

The grid-gap property sets the gap between the columns.

Tested environments

In terms of browsers' support, it seems to be safe to use:

• display: grid
• grid-template-columns
• repeat()
• minmax()

So I tested only the oldest combinations of browsers/versions listed in our compatibility browsers list):

• Firefox 118.0.1 / macOS 14.1 (my env by default)
• Chrome 88 / Windows 8
• Edge 88 / Windows 8
• iPhone 12 Pro Max / Safari 16
  • ⚠️ I don't have any 15.4 env to test on BrowserStack, before 15.4, the layout is completely broken so untestable
• Firefox 98 / macOS 12.1

[changeset-bot]

🦋 Changeset detected

Latest commit: f3922fe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
starlight	✅ Ready (Inspect)	Visit Preview	Oct 6, 2023 7:23pm

[netlify]

👷 Deploy Preview for astro-starlight processing.

Name	Link
🔨 Latest commit	f3922fe
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/65380220fd4b000007157d26

[delucis]

Love this solution! Thank you for cracking it @julien-deramond 💖

Left a couple of small notes, but I think this is 100% the right solution.

[delucis]

Awesome — the preview looks good to me! For future reference if anyone wants to see it to test out, it should be here for posterity: https://653800362ca82700088bafb1--astro-starlight.netlify.app/getting-started/

@julien-deramond I think it should be safe to go ahead and remove the test files 🥳

[julien-deramond]

• 🟢 Fork synced with the main branch
• 🟢 Branch rebased onto main branch, squashed, and is now without the extra commit
• 🤞 Waiting for the deployment to check the rendering, but should be good to go
• 🟢 Everything seems to be OK.

[delucis]

Yay! Thanks again for your persistence figuring this out. Really appreciate it 🤩