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

shubham-padia · 2025-11-03T10:35:03Z

Description

We were setting margin-bottom as -2px when at the same time we had a bottom border of 2px. Using this indirect margin was causing the tab container to be greater in height than it's wrapper when we zoomed out from the default zoom level. This introduced an unnecessary scroll bar.

Zoom Level	Before	After
90%
100%

I'm not sure if this PR warrants a minor version bump or not, let me know if it does.

changeset-bot · 2025-11-03T10:35:07Z

🦋 Changeset detected

Latest commit: cf44ae4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2025-11-03T10:36:03Z

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	`cf44ae4`
🔍 Latest deploy log	https://app.netlify.com/projects/astro-starlight/deploys/6908c9dc6fe77700076f6007
😎 Deploy Preview	https://deploy-preview-3521--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

delucis

Very good catch and fix @shubham-padia! Nice one.

I agree this probably should be in a minor release, just in case someone customized border width in their theme and the switch to box-shadow could cause issues. Normally for changes like this we also try to include a snippet in the changeset explaining how to “revert” the new style if wanted for whatever reason, so maybe something like:

starlight-tabs .tab {
  margin-bottom: -2px;
}

starlight-tabs .tab > [role='tab'] {
  border-bottom: 2px solid var(--sl-color-gray-5);
}

starlight-tabs .tab [role='tab'][aria-selected='true'] {
  border-color: var(--sl-color-text-accent);
  box-shadow: none;
}

There’s a recent example of something like that in the changelog entry for v0.36 in case it’s helpful to see.

We were setting margin-bottom as -2px when at the same time we had a bottom border of 2px. Using this indirect margin was causing the tab container to be greater in height than it's wrapper when we zoomed out from the default zoom level. This introduced an unnecessary scroll bar. We use a border-bottom of 2px on `.tab` mainly to mark the active tab with `--sl-color-text-accent`, the additional margin-bottom: -2px hides the grey border from the tablist so it doesn't feel like we have a blue bottom border for the active tab sitting on top of a grey border. Using box shadow instead to paint over the bottom border of the tablist is a cleaner idea than doing these margin-bottom shenanigans.

shubham-padia · 2025-11-03T13:18:53Z

Updated the PR @delucis ! Let me know if we want this to be part of a patch release instead of minor.

delucis · 2025-11-04T09:25:16Z

.changeset/fresh-horses-burn.md

+⚠️ Potentially breaking change: Tabs don't use margin-bottom to
+hide border anymore. We also remove the bottom border from `.tab`.
+
+If you want to preserve the previous styling, you can add the following
+custom CSS to your site:
+
+```
+starlight-tabs .tab {
+  margin-bottom: -2px;
+}
+
+starlight-tabs .tab > [role='tab'] {
+  border-bottom: 2px solid var(--sl-color-gray-5);
+}
+
+starlight-tabs .tab [role='tab'][aria-selected='true'] {
+  border-color: var(--sl-color-text-accent);
+  box-shadow: none;
+}
+```


This looks great @shubham-padia — just suggesting a few tweaks for the changelog:

Suggested change

⚠️ Potentially breaking change: Tabs don't use margin-bottom to

hide border anymore. We also remove the bottom border from `.tab`.

If you want to preserve the previous styling, you can add the following

custom CSS to your site:

```

starlight-tabs .tab {

margin-bottom: -2px;

}

starlight-tabs .tab > [role='tab'] {

border-bottom: 2px solid var(--sl-color-gray-5);

}

starlight-tabs .tab [role='tab'][aria-selected='true'] {

border-color: var(--sl-color-text-accent);

box-shadow: none;

}

```

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:

```

starlight-tabs .tab {

margin-bottom: -2px;

}

starlight-tabs .tab > [role='tab'] {

border-bottom: 2px solid var(--sl-color-gray-5);

}

starlight-tabs .tab [role='tab'][aria-selected='true'] {

border-color: var(--sl-color-text-accent);

box-shadow: none;

}

```

HiDeoo

Removing the border on .tab > [role='tab'] would end up with a different behavior when the tab list is scrollable.

Before	After

I guess this may be fixable with a box-shadow instead of removing the border, but didn't investigate further yet.

delucis · 2025-11-04T11:21:38Z

I guess this may be fixable with a box-shadow instead of removing the border, but didn't investigate further yet.

Ah, good catch. We probably need the box-shadow on [role=tab] as well to avoid this.

delucis

Probably this set of changes is how I’d approach it:

Control the colour via a custom property
Set the box-shadow on the [role="tab"] element
Update the custom property when the tab is selected.

delucis · 2025-11-04T11:23:43Z

packages/starlight/user-components/Tabs.astro

 			display: flex;
 			align-items: center;
 			gap: 0.5rem;
 			line-height: var(--sl-line-height-headings);
 			padding: 0.275rem 1.25rem;
 			text-decoration: none;


Suggested change

--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;

box-shadow: 0 2px 0 var(--sl-tab-color-border);

delucis · 2025-11-04T11:24:12Z

packages/starlight/user-components/Tabs.astro

 			overflow-wrap: initial;
 		}
 		.tab [role='tab'][aria-selected='true'] {
 			color: var(--sl-color-white);


Suggested change

color: var(--sl-color-white);

--sl-tab-color-border: var(--sl-color-text-accent);

color: var(--sl-color-white);

Yeah, that is pretty much what I had in mind. Just tested locally and this works as expected (just took the liberty of editing this suggestion as it was suggesting to replace the color: var(--sl-color-white); line instead of appending after it.

delucis · 2025-11-04T11:24:13Z

packages/starlight/user-components/Tabs.astro

 		.tab [role='tab'][aria-selected='true'] {
 			color: var(--sl-color-white);
-			border-color: var(--sl-color-text-accent);
+			box-shadow: 0 2px 0 var(--sl-color-text-accent);


Suggested change

box-shadow: 0 2px 0 var(--sl-color-text-accent);

github-actions bot added the 🌟 core Changes to Starlight’s main package label Nov 3, 2025

delucis reviewed Nov 3, 2025

View reviewed changes

delucis added the 🌟 minor Change that triggers a minor release label Nov 3, 2025

delucis added this to the v0.37 milestone Nov 3, 2025

shubham-padia force-pushed the fix-tab-overflow-on-zoom-out branch from f56749a to 63c49b6 Compare November 3, 2025 13:16

shubham-padia force-pushed the fix-tab-overflow-on-zoom-out branch from 63c49b6 to 7033a9c Compare November 3, 2025 13:18

Format

cf44ae4

delucis reviewed Nov 4, 2025

View reviewed changes

HiDeoo reviewed Nov 4, 2025

View reviewed changes

delucis reviewed Nov 4, 2025

View reviewed changes

	color: var(--sl-color-white);
	--sl-tab-color-border: var(--sl-color-text-accent);
	color: var(--sl-color-white);

Uh oh!

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

Are you sure you want to change the base?

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

Conversation

shubham-padia commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

changeset-bot bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for astro-starlight ready!

Uh oh!

delucis left a comment

Choose a reason for hiding this comment

Uh oh!

shubham-padia commented Nov 3, 2025

Uh oh!

delucis Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HiDeoo left a comment

Choose a reason for hiding this comment

Uh oh!

delucis commented Nov 4, 2025

Uh oh!

delucis left a comment

Choose a reason for hiding this comment

Uh oh!

delucis Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

delucis Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HiDeoo Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

delucis Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

shubham-padia commented Nov 3, 2025 •

edited

Loading

changeset-bot bot commented Nov 3, 2025 •

edited

Loading

netlify bot commented Nov 3, 2025 •

edited

Loading

delucis Nov 4, 2025 •

edited

Loading

delucis Nov 4, 2025 •

edited

Loading