Avoid clipping focus indicator around site title

withastro · Dec 17, 2024 · 72384d8 · 72384d8
1 parent 3fe09c1
commit 72384d8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/.changeset/five-radios-laugh.md b/.changeset/five-radios-laugh.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes display of focus indicator around site title
diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro
@@ -39,14 +39,6 @@ const shouldRenderSearch =
 		height: 100%;
 	}
 
-	.title-wrapper {
-		/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
-		overflow: clip;
-		/* Avoid clipping focus ring around link inside title wrapper. */
-		padding: 0.25rem;
-		margin: -0.25rem;
-	}
-
 	.right-group,
 	.social-icons {
 		gap: 1rem;

diff --git a/packages/starlight/components/SiteTitle.astro b/packages/starlight/components/SiteTitle.astro
@@ -29,7 +29,7 @@ const { siteTitle, siteTitleHref } = Astro.props;
 			</>
 		)
 	}
-	<span class:list={{ 'sr-only': config.logo?.replacesTitle }}>
+	<span class:list={[{ 'sr-only': config.logo?.replacesTitle }, 'site-title-text']}>
 		{siteTitle}
 	</span>
 </a>
@@ -43,6 +43,12 @@ const { siteTitle, siteTitleHref } = Astro.props;
 		color: var(--sl-color-text-accent);
 		text-decoration: none;
 		white-space: nowrap;
+		min-width: 0;
+	}
+	.site-title-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-wrap: nowrap;
 	}
 	img {
 		height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));