🦋 Changeset detected

Latest commit: 381f2bb

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	381f2bb
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/6813763b3c9ddb0008c40c2a
😎 Deploy Preview	https://deploy-preview-3058--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.

Thanks for bringing back this PR @techfg! Perhaps I’m missing something but this doesn’t seem to actually do what’s described?

If I add a :focus-visible { outline: 10px solid } style to the deploy preview, I see the exact same clipping behaviour as on the current live site:

As I mentioned previously, I don’t think this is an issue? The user agent default focus styles show up OK and if someone wants to add custom outline styles they can also add custom styles to the title to handle those if necessary. But either way this PR doesn’t seem to change things related to that.

Hi @delucis -

Thanks reviewing and sorry for the confusion here!

1. Fixes display of long site title on mobile #2722 addressed the issue with the title-wrapper not respecting its flex position within header and overflowing.
2. This PR addresses the site-title-text respecting its width within site-title and not overflowing.

In short, you are only going to see a difference with this PR when you have title text and that text overflows. For example, a really long title or "long enough" when the viewport is narrower.

In main, when the text overflows, the focus outline is not visible on the far right and it should be. This PR improves the following:

1. Ensures the outline on the right side is always visible
2. Improves the overflowing text by adding ellipses

Hopefully this helps better explain and demonstrate what this PR is trying to achieve.

To see the effect:

1. Modify astro.config.mjs

	integrations: [
		starlight({
			title:
+				'Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight Starlight',
-				'Starlight',
			logo: {
				light: '/src/assets/logo-light.svg',
				dark: '/src/assets/logo-dark.svg',
+				replacesTitle: false,
-				replacesTitle: true,
			},

2. Add outline

*:focus,
*:focus:not(:focus-visible) {
  outline: 1px solid transparent;
}

*:focus-visible {
  outline: 1px solid green;
  outline-offset: 1px;
}

Before Desktop:

Before Mobile:

After Desktop:

After Mobile:

Thanks for your patience on this PR @techfg — had a busy few weeks and some time away, which meant I couldn’t get to this. Left a few comments!

No worries @delucis, hope you enjoyed the time away. PR updated per your feedback, let me know if you think this needs anything else. Thank you!