Skip to content

Ensure tab links span the full tab height#3427

Merged
delucis merged 4 commits intomainfrom
chris/fix-long-tabs
Sep 19, 2025
Merged

Ensure tab links span the full tab height#3427
delucis merged 4 commits intomainfrom
chris/fix-long-tabs

Conversation

@delucis
Copy link
Copy Markdown
Member

@delucis delucis commented Sep 15, 2025

Description

  • Closes Tab item labels visually bug out if not all labels are the same height #3383
  • Updates styles applied to tab labels so that they work better for long labels and labels that wrap onto a second line.
  • For the default case, with labels that do not wrap, the appearance is unchanged, with the vertical layout identical. However, for labels that do wrap, line height is now tighter (using Starlight’s 1.2 heading line height), making each tab label a bit more compact and a bit more visually distinct.
  • For tabs where only some labels wrap, this PR fixes a bug where the bottom border of a tab would not align correctly
Before After
tab component with tab labels wrapping with a large line height. the first tab is shorter than the others, leaving its bottom border floating in the middle of the tab area. the same tab component with a tighter line height. the first tab’s border is now correctly aligned.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Sep 15, 2025

🦋 Changeset detected

Latest commit: db494db

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

@github-actions github-actions bot added the 🌟 core Changes to Starlight’s main package label Sep 15, 2025
@delucis delucis added 🌟 minor Change that triggers a minor release and removed 🌟 core Changes to Starlight’s main package labels Sep 15, 2025
@netlify
Copy link
Copy Markdown

netlify bot commented Sep 15, 2025

Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit db494db
🔍 Latest deploy log https://app.netlify.com/projects/astro-starlight/deploys/68c81770c3fd2700085969d7
😎 Deploy Preview https://deploy-preview-3427--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 95 (🔴 down 5 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 delucis added the 🌟 core Changes to Starlight’s main package label Sep 15, 2025
@astrobot-houston
Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
/index.html 7.2 KB (0%)
/_astro/*.js 25.76 KB (0%)
/_astro/*.css 14.25 KB (0%)

Copy link
Copy Markdown
Member

@ArmandPhilippot ArmandPhilippot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested locally both on Firefox and Chromium by reproducing the example, and this looks great to me! 🙌🏽

Copy link
Copy Markdown
Member

@HiDeoo HiDeoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a great fix to me, tested on all major browsers and also tested this does not somehow break our tabs position persistence when alternating between tabs with different content heights 🚀

@delucis delucis added the ✅ approved Pull requests that have been approved and are ready to merge when next cutting a release label Sep 17, 2025
@delucis delucis added this to the v0.36 milestone Sep 17, 2025
@delucis delucis merged commit c3b2d0f into main Sep 19, 2025
17 checks passed
@delucis delucis deleted the chris/fix-long-tabs branch September 19, 2025 13:44
@astrobot-houston astrobot-houston mentioned this pull request Sep 18, 2025
@KTrain5169
Copy link
Copy Markdown

yay! thanks!

HiDeoo added a commit to HiDeoo/starlight that referenced this pull request Oct 2, 2025
* main: (26 commits)
  i18n(ja): resources/themes (withastro#3442)
  add openstatus showcase (withastro#3436)
  [ci] release (withastro#3434)
  Add `head` config validation for `meta` tags with `content` (withastro#3380)
  Fix Astro Island margins in Markdown (withastro#3340)
  Ensure tab links span the full tab height (withastro#3427)
  Move `<summary>` to top of `<details>` for validity (withastro#3423)
  Run all tests on CI workflow changes (withastro#3433)
  [ci] format
  i18n(fr): small rewording and fixes in top-level pages (withastro#3432)
  i18n(fr): small rewording and fixes in `guides` (withastro#3431)
  i18n(fr): fix typo and links in `reference` files (withastro#3429)
  i18n(fr): small rewording in `components` (withastro#3430)
  [ci] release (withastro#3384)
  i18n(de): Update `page.lastUpdated` translation to be more in‐line with the English translation (withastro#3416)
  Remove invalid value attribute from `<select>` (withastro#3421)
  Convert invalid `<div>` child of `<summary>` to `<span>` (withastro#3422)
  [i18nIgnore] Fix typo in Spanish docs documentation (withastro#3408)
  chore(deps): update actions/labeler action to v6.0.1 (withastro#3407)
  [i18nIgnore] Fix duplicate i18n collection definition (withastro#3409)
  ...
HiDeoo added a commit to HiDeoo/starlight that referenced this pull request Oct 7, 2025
* main: (72 commits)
  Showcase: Add Saucer (withastro#3454)
  i18n(ja): resources/themes (withastro#3442)
  add openstatus showcase (withastro#3436)
  [ci] release (withastro#3434)
  Add `head` config validation for `meta` tags with `content` (withastro#3380)
  Fix Astro Island margins in Markdown (withastro#3340)
  Ensure tab links span the full tab height (withastro#3427)
  Move `<summary>` to top of `<details>` for validity (withastro#3423)
  Run all tests on CI workflow changes (withastro#3433)
  [ci] format
  i18n(fr): small rewording and fixes in top-level pages (withastro#3432)
  i18n(fr): small rewording and fixes in `guides` (withastro#3431)
  i18n(fr): fix typo and links in `reference` files (withastro#3429)
  i18n(fr): small rewording in `components` (withastro#3430)
  [ci] release (withastro#3384)
  i18n(de): Update `page.lastUpdated` translation to be more in‐line with the English translation (withastro#3416)
  Remove invalid value attribute from `<select>` (withastro#3421)
  Convert invalid `<div>` child of `<summary>` to `<span>` (withastro#3422)
  [i18nIgnore] Fix typo in Spanish docs documentation (withastro#3408)
  chore(deps): update actions/labeler action to v6.0.1 (withastro#3407)
  ...
HiDeoo added a commit to HiDeoo/starlight that referenced this pull request Oct 14, 2025
* main: (87 commits)
  i18n(ja): sync outdated aside page (withastro#3465)
  i18n(ja): sync outdated icon reference (withastro#3467)
  chore(deps): update pnpm/action-setup action to v4.2.0 (withastro#3460)
  Showcase: Add Saucer (withastro#3454)
  i18n(ja): resources/themes (withastro#3442)
  add openstatus showcase (withastro#3436)
  [ci] release (withastro#3434)
  Add `head` config validation for `meta` tags with `content` (withastro#3380)
  Fix Astro Island margins in Markdown (withastro#3340)
  Ensure tab links span the full tab height (withastro#3427)
  Move `<summary>` to top of `<details>` for validity (withastro#3423)
  Run all tests on CI workflow changes (withastro#3433)
  [ci] format
  i18n(fr): small rewording and fixes in top-level pages (withastro#3432)
  i18n(fr): small rewording and fixes in `guides` (withastro#3431)
  i18n(fr): fix typo and links in `reference` files (withastro#3429)
  i18n(fr): small rewording in `components` (withastro#3430)
  [ci] release (withastro#3384)
  i18n(de): Update `page.lastUpdated` translation to be more in‐line with the English translation (withastro#3416)
  Remove invalid value attribute from `<select>` (withastro#3421)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✅ approved Pull requests that have been approved and are ready to merge when next cutting a release 🌟 core Changes to Starlight’s main package 🌟 minor Change that triggers a minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tab item labels visually bug out if not all labels are the same height

5 participants