🦋 Changeset detected

Latest commit: 8bcbcb6

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

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

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	8bcbcb6
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/676017aa55ea8e0008a494e2
😎 Deploy Preview	https://deploy-preview-2704--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

size-limit report 📦

Thanks for the quick response @delucis!

@delucis -

Unfortunately, I came across an issue when doing some testing based on this PR.

By default, I believe most browsers will apply an outline-width of 1px via user-agent. However, outline can be customized, and often is (see the recommendation in #2693 for doing it with Starlight itself). More importantly, it can be overridden by the user via user stylesheets/settings.

When the outline is customized to a larger width, the outline does not display consistently on all borders for site-title.

I've updated the repro to Starlight v0.30.2 and to use a 10px width and, while an exaggerated width, it easily demonstrates the issue. Once you reach 4px (which corresponds with the padding/margin you applied, possibly to compensate for this exact issue), the problem becomes very visible. Applying an overflow of unset or visible to title-wrapper resolves the issue. I'm assuming the overflow is in-place to constrain the content, likely images and long titles per the comment, within the title but possibly there is another way to accomplish without using overflow.

Another scenario is when there is really long title text - in this case, the right side of the outline is completely hidden