Fix FeatureGrid 3/4-col overflow on narrow viewports + WCAG 2.4.1 skip link

[Copilot]

At ~800–1000px viewport width, .feature-grid.columns-3 activated at 50rem but the Starlight content area is only ~760px — causing the third column to overflow and be clipped. columns-4 had the same problem at an even wider threshold. Additionally, the skip navigation link lacked proper WCAG 2.4.1 implementation.

FeatureGrid breakpoint fix (FeatureGrid.astro)

Split the single shared @media (min-width: 50rem) block into per-column breakpoints sized to the actual minimum content width required:

/* Before: all three share 50rem — columns-3/4 overflow narrow viewports */
@media (min-width: 50rem) {
  .feature-grid.columns-2 { grid-template-columns: repeat(2, minmax(20rem, 1fr)); }
  .feature-grid.columns-3 { grid-template-columns: repeat(3, minmax(20rem, 1fr)); }
  .feature-grid.columns-4 { grid-template-columns: repeat(4, minmax(20rem, 1fr)); }
}

/* After: each breakpoint matches the minimum width the layout actually needs */
@media (min-width: 50rem) { /* 2×320 + 20 = 660px */
  .feature-grid.columns-2 { grid-template-columns: repeat(2, minmax(20rem, 1fr)); }
}
@media (min-width: 72rem) { /* 3×320 + 2×20 = 1000px */
  .feature-grid.columns-3 { grid-template-columns: repeat(3, minmax(20rem, 1fr)); }
}
@media (min-width: 90rem) { /* 4×320 + 3×20 = 1340px */
  .feature-grid.columns-4 { grid-template-columns: repeat(4, minmax(20rem, 1fr)); }
}

Skip navigation link (SkipLink.astro, astro.config.mjs, custom.css)

• Added SkipLink.astro as a Starlight component override rendering <a href="#_top" class="skip-link">Skip to main content</a>
• Registered it in astro.config.mjs under components
• Replaced the old !important-heavy attribute-selector CSS with clean .skip-link rules: off-screen by default (top: -9999px), revealed on :focus

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /opt/hostedtoolcache/node/24.14.0/x64/bin/node node /home/REDACTED/.npm/_npx/aa98e6899c6baff3/node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

⚡ Quickly spin up Copilot coding agent tasks from anywhere on your macOS or Windows machine with Raycast.

[Copilot]

Pull request overview

Adjusts documentation site responsiveness and accessibility by preventing FeatureGrid multi-column layouts from overflowing on narrower viewports and by adding a dedicated WCAG 2.4.1 skip-to-content link via a Starlight component override.

Changes:

• Split FeatureGrid column breakpoints into per-column media queries to avoid 3/4-column overflow on mid-width viewports.
• Added a Starlight SkipLink component override and corresponding .skip-link styling.
• Registered the new SkipLink override in astro.config.mjs.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
docs/src/styles/custom.css	Replaces attribute-selector skip-link focus styling with a .skip-link class-based implementation.
docs/src/components/SkipLink.astro	Introduces a dedicated skip-to-content link component for Starlight override.
docs/src/components/FeatureGrid.astro	Updates responsive grid breakpoints for 2/3/4-column configurations.
docs/astro.config.mjs	Wires the SkipLink component into Starlight’s components overrides.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The doc comment says this link “moves focus directly to the main content area”, but this component is a plain anchor and won’t programmatically move focus (it will only navigate/scroll to the fragment). Please adjust the comment to avoid claiming focus management unless focus is explicitly handled (e.g., by targeting a focusable element).

Suggested change

	Visually hidden until focused via keyboard; moves focus directly to the
	main content area, bypassing repeated navigation blocks. -->
	Visually hidden until focused via keyboard; allows users to jump directly
	to the main content area, bypassing repeated navigation blocks. -->

[Copilot]

The breakpoint comments don’t match the actual rem values used: e.g. 72rem is 1152px (at 16px base), not 1000px, and 90rem is 1440px, not 1340px. Either update the comments to reflect the true conversions/assumptions (root font size, container vs viewport), or adjust the breakpoints to match the stated pixel thresholds.

Suggested change

	/* 4-col layout: 4 × 320px + 3 × 20px gap = 1340px → activate at 90rem (1440px) */
	/* 4-col layout: 4 × 320px + 3 × 20px gap ≈ 1340px; activate at 90rem (1440px) to allow
	extra room for the content container and avoid edge clipping. */

[Copilot]

This change is specifically addressing a mid-width overflow regression (~800–1000px), but the existing Playwright responsive coverage (see docs/tests/mobile-responsive.spec.ts form factors) doesn’t exercise that range. Consider adding a viewport around ~900px and asserting no horizontal scrolling on a page that renders FeatureGrid with columns=3/4 to prevent regressions.