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