From 4741cccc8adbef500bcaf95416a1c61a90761c06 Mon Sep 17 00:00:00 2001
From: Chris Swithinbank
Date: Tue, 6 Feb 2024 15:09:26 +0100
Subject: Fix overflow of long site titles on narrow viewports (#1462)

---
 .changeset/four-fishes-clean.md               | 5 +++++
 packages/starlight/components/Header.astro    | 7 ++++++-
 packages/starlight/components/SiteTitle.astro | 3 ---
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/four-fishes-clean.md

diff --git a/.changeset/four-fishes-clean.md b/.changeset/four-fishes-clean.md
new file mode 100644
index 00000000..58cfbac1
--- /dev/null
+++ 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
index 06f6695e..87b97fb1 100644
--- 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
index 4037b6e0..6f6fc9ed 100644
--- 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);
-- 
cgit