Fix "unsaved changes" badge positioning on Edit Feature modal tabs

[talissoncosta]

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 (lines 160-171) — .btn-tab .unread overrides
• Base badge styling: web/styles/project/_utils.scss (lines 155-171) — .unread class with position: relative; bottom: -1px which likely causes the overflow

Hints

The bottom: -1px on .unread in _utils.scss pushes the badge down. The fix likely involves adjusting the vertical alignment of .unread within .btn-tab — either removing the bottom: -1px offset when inside a tab, or adding align-items: center to the parent Row container in the tab label.

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