From 1e517d92a4cf146d2dcae58f7c4299d6f25ea73e Mon Sep 17 00:00:00 2001
From: Julien Déramond
Date: Tue, 24 Oct 2023 19:49:23 +0200
Subject: fix: prevent text from overflowing prev/next links (#814)

---
 .changeset/tasty-garlics-dress.md              |  5 +++++
 packages/starlight/components/Pagination.astro | 10 ++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tasty-garlics-dress.md

diff --git a/.changeset/tasty-garlics-dress.md b/.changeset/tasty-garlics-dress.md
new file mode 100644
index 00000000..c7c1bc35
--- /dev/null
+++ b/.changeset/tasty-garlics-dress.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Prevent text from overflowing pagination items
diff --git a/packages/starlight/components/Pagination.astro b/packages/starlight/components/Pagination.astro
index 2b66ced5..72dc8df3 100644
--- a/packages/starlight/components/Pagination.astro
+++ b/packages/starlight/components/Pagination.astro
@@ -9,7 +9,7 @@ const isRtl = dir === 'rtl';
 const t = useTranslations(locale);
 ---
 
-<div class="pagination-links sl-flex" dir={dir}>
+<div class="pagination-links" dir={dir}>
 	{
 		prev && (
 			<a href={prev.href} rel="prev">
@@ -38,7 +38,8 @@ const t = useTranslations(locale);
 
 <style>
 	.pagination-links {
-		flex-wrap: wrap;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
 		gap: 1rem;
 	}
 
@@ -56,6 +57,7 @@ const t = useTranslations(locale);
 		text-decoration: none;
 		color: var(--sl-color-gray-2);
 		box-shadow: var(--sl-shadow-md);
+		overflow-wrap: anywhere;
 	}
 	[rel='next'] {
 		justify-content: end;
@@ -71,4 +73,8 @@ const t = useTranslations(locale);
 		font-size: var(--sl-text-2xl);
 		line-height: var(--sl-line-height-headings);
 	}
+
+	svg {
+		flex-shrink: 0;
+	}
 </style>
-- 
cgit