fix: prevent text from overflowing prev/next links (#814)

withastro · Oct 24, 2023 · 1e517d9 · 1e517d9
1 parent faf096c
commit 1e517d9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/tasty-garlics-dress.md 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
@@ -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>