Prevent text from overflowing in various cases (#756)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

Author: julien-deramond

.changeset/smart-panthers-hang.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Prevent text from overflowing in several cases

packages/starlight/components/Badge.astro

@@ -22,6 +22,7 @@ const { variant = 'default', text } = Astro.props;
 		line-height: 1;
 		color: #fff;
 		background-color: var(--sl-color-bg-badge);
+		overflow-wrap: anywhere;
 	}
 
 	.outline {

packages/starlight/components/RightSidebarPanel.astro

@@ -26,7 +26,7 @@
 		font-size: var(--sl-text-xs);
 		text-decoration: none;
 		color: var(--sl-color-gray-3);
-		word-break: break-word;
+		overflow-wrap: anywhere;
 	}
 	.right-sidebar-panel :global(a:hover) {
 		color: var(--sl-color-white);

packages/starlight/components/Search.astro

@@ -405,7 +405,7 @@ const pagefindTranslations = {
 
 	#starlight__search .pagefind-ui__result-excerpt {
 		font-size: calc(1rem * var(--pagefind-ui-scale));
-		word-break: break-word;
+		overflow-wrap: anywhere;
 	}
 
 	#starlight__search mark {

packages/starlight/components/SidebarSublist.astro

@@ -53,6 +53,10 @@ interface Props {
 		padding: 0;
 	}
 
+	li {
+		overflow-wrap: anywhere;
+	}
+
 	ul ul li {
 		margin-inline-start: var(--sl-sidebar-item-padding-inline);
 		border-inline-start: 1px solid var(--sl-color-hairline-light);
@@ -84,6 +88,7 @@ interface Props {
 
 	.caret {
 		transition: transform 0.2s ease-in-out;
+		flex-shrink: 0;
 	}
 	:global([dir='rtl']) .caret {
 		transform: rotateZ(180deg);

packages/starlight/style/reset.css

@@ -40,7 +40,7 @@ h4,
 h5,
 h6,
 code {
-	overflow-wrap: break-word;
+	overflow-wrap: anywhere;
 }
 
 code {