Tabs: Remove margin-bottom being used to hide border. (#3521)

shubham-padia · delucis · web-flow · commit ca7b771e5bd4 · 2025-11-28T17:45:50.000+01:00
Co-authored-by: Chris Swithinbank &lt;swithinbank@gmail.com&gt;
diff --git a/.changeset/fresh-horses-burn.md b/.changeset/fresh-horses-burn.md
@@ -0,0 +1,24 @@
+---
+'@astrojs/starlight': minor
+---
+
+Fixes an issue where a vertical scrollbar could be displayed on the Starlight `<Tabs>` component when zooming the page
+
+⚠️ **Potentially breaking change:** The `<Tabs>` component no longer uses `margin-bottom` and `border-bottom` to highlight the current tab. This is now done with a `box-shadow`. If you have custom styling for your tabs, you may need to update it.
+
+If you want to preserve the previous styling, you can add the following custom CSS to your site:
+
+```css
+starlight-tabs .tab {
+	margin-bottom: -2px;
+}
+
+starlight-tabs .tab > [role='tab'] {
+	border-bottom: 2px solid var(--sl-color-gray-5);
+	box-shadow: none;
+}
+
+starlight-tabs .tab [role='tab'][aria-selected='true'] {
+	border-color: var(--sl-color-text-accent);
+}
+```
diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro
@@ -116,23 +116,23 @@ if (isSynced) {
 
 		.tab {
 			display: flex;
-			margin-bottom: -2px;
 		}
 		.tab > [role='tab'] {
+			--sl-tab-color-border: var(--sl-color-gray-5);
 			display: flex;
 			align-items: center;
 			gap: 0.5rem;
 			line-height: var(--sl-line-height-headings);
 			padding: 0.275rem 1.25rem;
 			text-decoration: none;
-			border-bottom: 2px solid var(--sl-color-gray-5);
+			box-shadow: 0 2px 0 var(--sl-tab-color-border);
 			color: var(--sl-color-gray-3);
 			outline-offset: var(--sl-outline-offset-inside);
 			overflow-wrap: initial;
 		}
 		.tab [role='tab'][aria-selected='true'] {
+			--sl-tab-color-border: var(--sl-color-text-accent);
 			color: var(--sl-color-white);
-			border-color: var(--sl-color-text-accent);
 			font-weight: 600;
 		}
 
