From 7033a9c581c5eb7c47e7c4c641fa3f9102ba138d Mon Sep 17 00:00:00 2001 From: Shubham Padia Date: Mon, 3 Nov 2025 15:33:24 +0530 Subject: [PATCH 1/2] Tabs: Remove margin-bottom being used to hide border. 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. --- .changeset/fresh-horses-burn.md | 24 +++++++++++++++++++ packages/starlight/user-components/Tabs.astro | 6 ++--- 2 files changed, 26 insertions(+), 4 deletions(-) create mode 100644 .changeset/fresh-horses-burn.md diff --git a/.changeset/fresh-horses-burn.md b/.changeset/fresh-horses-burn.md new file mode 100644 index 00000000000..6a0ceb0966a --- /dev/null +++ b/.changeset/fresh-horses-burn.md @@ -0,0 +1,24 @@ +--- +'@astrojs/starlight': minor +--- + +⚠️ 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; +} +``` diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro index d8fa647889e..b075875f1da 100644 --- a/packages/starlight/user-components/Tabs.astro +++ b/packages/starlight/user-components/Tabs.astro @@ -116,7 +116,6 @@ if (isSynced) { .tab { display: flex; - margin-bottom: -2px; } .tab > [role='tab'] { display: flex; @@ -125,14 +124,13 @@ if (isSynced) { line-height: var(--sl-line-height-headings); padding: 0.275rem 1.25rem; text-decoration: none; - border-bottom: 2px solid var(--sl-color-gray-5); color: var(--sl-color-gray-3); outline-offset: var(--sl-outline-offset-inside); overflow-wrap: initial; } .tab [role='tab'][aria-selected='true'] { - color: var(--sl-color-white); - border-color: var(--sl-color-text-accent); + color: var(--sl-color-white); + box-shadow: 0 2px 0 var(--sl-color-text-accent); font-weight: 600; } From cf44ae479989d12f3986df0b14646b981fd16cd3 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Mon, 3 Nov 2025 16:27:21 +0100 Subject: [PATCH 2/2] Format --- packages/starlight/user-components/Tabs.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro index b075875f1da..16f5235635f 100644 --- a/packages/starlight/user-components/Tabs.astro +++ b/packages/starlight/user-components/Tabs.astro @@ -129,7 +129,7 @@ if (isSynced) { overflow-wrap: initial; } .tab [role='tab'][aria-selected='true'] { - color: var(--sl-color-white); + color: var(--sl-color-white); box-shadow: 0 2px 0 var(--sl-color-text-accent); font-weight: 600; }