docs: fix breadcrumbs overflow (#9700)

This makes sure it's not hidden. We can wrap it or move the buttons.

Author: jd

src/components/PageContent/PageContent.astro

@@ -103,18 +103,28 @@ const suppressTitle = content.suppressTitle;
 	}
 	:global(.page-heading-bar__breadcrumbs) {
 		min-width: 0;
+		position: relative;
 	}
 	:global(.page-heading-bar__breadcrumbs .breadcrumbs) {
 		margin: 0;
 		display: inline-flex;
 		align-items: center;
+		width: 100%;
 	}
 	:global(.page-heading-bar__breadcrumbs .breadcrumbs ol) {
-		flex-wrap: nowrap;
+		display: flex;
+		flex-wrap: wrap;
 		gap: 0.25rem;
+		row-gap: 0.15rem;
+		padding: 0;
+		overflow: visible;
 	}
 	:global(.page-heading-bar__breadcrumbs .breadcrumbs li) {
 		max-width: none;
+		flex-shrink: 1;
+		white-space: normal;
+		overflow: visible;
+		text-overflow: clip;
 	}
 	:global(.docs-toolbar-actions--heading) {
 		display: inline-flex;

src/styles/theme.css

@@ -21,7 +21,7 @@
   --theme-text-md: 1rem;
   --theme-text-sm: 0.9375rem;
   --theme-text-xs: 0.875rem;
-  --docs-toolbar-mobile-breakpoint: 40em;
+  --docs-toolbar-mobile-breakpoint: 80em;
   /* Animation helpers */
   --theme-ease-bounce: cubic-bezier(0.4, 2.5, 0.6, 1);
 }