Skip to content

fix: nav tab underline sticks to stale position after sibling tabs mount#9259

Open
royendo wants to merge 1 commit intomainfrom
royendo/fix-nav-underline-stale-position
Open

fix: nav tab underline sticks to stale position after sibling tabs mount#9259
royendo wants to merge 1 commit intomainfrom
royendo/fix-nav-underline-stale-position

Conversation

@royendo
Copy link
Copy Markdown
Contributor

@royendo royendo commented Apr 20, 2026

  • `ResizeObserver` in `Tab.svelte` only fires on size changes. When sibling tabs in `ProjectTabs`/`OrganizationTabs` mounted async (feature flags, `projectPermissions`), the selected tab's cached `offsetLeft` stayed stale and the underline landed under the wrong tab in prod.
  • Fix: also observe the parent nav so sibling add/remove triggers a re-measure on the selected tab. Clean up the observer on unmount.
  • Also set `position` when the selected tab's `offsetLeft === 0`, and drop the `$position` truthiness gate in the parent templates so the first tab still shows the underline.

When AI is disabled

  • Before:
Screenshot 2026-04-20 at 10 12 56 After: Screenshot 2026-04-20 at 10 12 14

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

Developed in collaboration with Claude Code

ResizeObserver only fires on size changes, so when sibling tabs in
ProjectTabs/OrganizationTabs mounted async (feature flags, permissions),
the selected tab's cached offsetLeft stayed stale and the underline
landed under the wrong tab. Also set position.set when the selected
tab's offsetLeft is 0, and drop the $position truthiness gate in the
parent templates so the first tab still shows the underline.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@royendo royendo requested a review from AdityaHegde April 20, 2026 14:29
}
});
$: if (selected && size) {
width.set(size);
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

We need to resist how we share width and position. Using a single global feels wrong since you cant have multiple instances in that case. Out of scope of this PR

</nav>

{#if $width && $position}
{#if $width}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Is this intended?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants