Description

The "unsaved changes" badge (purple dot with *) on the Edit Feature modal's "Segment Overrides" tab has positioning issues:

1. It overflows below the tab underline instead of aligning vertically with the tab label
2. It remains visible even when switching to a different tab (e.g. "Identity Overrides"), appearing under an inactive tab

Screenshots

Steps to reproduce

1. Open any feature (Edit Feature modal)
2. Click on the "Segment Overrides" tab
3. Make a change to a segment override (toggle enabled, change value, etc.) — the purple * badge appears
4. Observe the badge sits below the tab underline
5. Switch to "Identity Overrides" tab — the badge still shows under the now-inactive "Segment Overrides" tab

Expected behaviour

• The badge should align vertically centred with the tab label text
• The badge positioning should not overflow below the tab underline

Relevant files

• Badge rendered here: web/components/modals/create-feature/index.js (lines 934-937) — the .unread div inside the tab label
• Tab button styling: web/styles/components/_tabs.scss
• Tab component: web/components/navigation/TabMenu/Tabs.tsx
• Tab button component: web/components/navigation/TabMenu/TabButton.tsx
• Base badge styling: web/styles/project/_utils.scss (lines 155-171) — .unread class (global, used across the app)

How to test

1. Run ENV=local npm run dev
2. Open a feature with segment overrides
3. Toggle or edit a segment override to trigger the unsaved state
4. Verify the badge aligns with the tab text and doesn't overflow below the underline
5. Check other tab bars across the app (permissions, settings) for visual regressions