Fix overflow of long site titles on narrow viewports (#1462)

withastro · Feb 6, 2024 · 4741ccc · 4741ccc
1 parent 2e17880
commit 4741ccc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/four-fishes-clean.md b/.changeset/four-fishes-clean.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes overflow of very long site titles on narrow viewports
diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro
@@ -16,7 +16,7 @@ const shouldRenderSearch =
 ---
 
 <div class="header sl-flex">
-	<div class="sl-flex">
+	<div class="title-wrapper sl-flex">
 		<SiteTitle {...Astro.props} />
 	</div>
 	<div class="sl-flex">
@@ -39,6 +39,11 @@ const shouldRenderSearch =
 		height: 100%;
 	}
 
+	.title-wrapper {
+		/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
+		overflow: hidden;
+	}
+
 	.right-group,
 	.social-icons {
 		gap: 1rem;

diff --git a/packages/starlight/components/SiteTitle.astro b/packages/starlight/components/SiteTitle.astro
@@ -38,9 +38,6 @@ const href = formatPath(Astro.props.locale || '/');
 
 <style>
 	.site-title {
-		justify-self: flex-start;
-		max-width: 100%;
-		overflow: hidden;
 		align-items: center;
 		gap: var(--sl-nav-gap);
 		font-size: var(--sl-text-h4);