exploratory-review(segment-membership-ui): proposed fixes for PR #7467 -

[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Stacked on top of #7467 (feat/segment-membership-counts-ui). Proposed fixes for the review concerns raised on that PR — opening as a PR so the diff is reviewable side-by-side. Cherry-pick what resonates, drop what doesn't.

Design-system / SCSS

• Restore !important on .chip { align-self }. Was removed in feat(Segment membership inspection PoC): Surface identity counts in segments UI #7467 only so the new badge's inline alignSelf: 'center' could win. Reverting it avoids a global regression risk for every other .chip consumer (Feature-Specific on the segment row, BetaFlag, FeatureHistory, SegmentOverrides, …).
• Add .chip--filled modifier for the borderless filled variant. Removes the need for inline style={{ border: 'none', alignSelf: 'center', verticalAlign: 'middle' }} overrides on the badge.

Component shape

• Drop the private <Chip> wrapper in SegmentMembershipBadge.tsx. The codebase already uses .chip chip--xs directly with bg utility classes everywhere else — half-introducing a private wrapper inside a feature file was the worst of both worlds (not extracted to components/base/, but also no longer matching the inline pattern). Now the badge composes .chip chip--xs chip--filled inline like its neighbours.
• Split tab vs. row. Two components instead of one with a compact prop:
  • SegmentMembershipTotalBadge — filled chip on the segments-list row (unchanged appearance besides losing ~ago).
  • SegmentMembershipTabCount — muted (71) count next to the Identities tab label. Fixes the purple-on-purple contrast issue on the active Identities tab, and matches the visual weight of a tab badge convention.
• Remove the compact prop. It only dropped the noun, not the ~ago, so the "compact" tab badge still rendered as 71 ~23s ago — not compact, and misleading-named.

Behaviour

• Drop shortAgo / ~Xs ago. It froze on render (Date.now() evaluated once), and duplicated the precise Last synced: 7th May 2026 14:23:01 line that already lives below the env select in the Identities tab. The full timestamp is the right surface for freshness.
• ProjectStore.getEnvs() → useGetEnvironmentsQuery in CreateSegmentUsersTabContent.tsx. EnvironmentSelect already uses the same hook, so RTK Query caches the result — no extra request. Also drops the dead-code ProjectStore fallback in SegmentMembershipEnvBadge (the only caller always passed environment).

Env dropdown options

• Right-align the count with justify-content-between flex-grow-1 on the option row. Fixes the visual misalignment when env names vary in length (the t row in the screenshot vs. Development).
• SegmentMembershipEnvBadge → SegmentMembershipEnvCount — switches from a filled chip to muted right-aligned text. Inverts the visual hierarchy so the env name is the primary read and the count is secondary metadata. Matches the convention used elsewhere for in-option counts.

Not addressed (out of scope, worth a follow-up discussion)

• What does the total "71" actually mean? Summing memberships across envs double-counts identities that are in the segment in multiple envs. Either rename (Across N envs), scope to one env, or accept-and-document. Asking on feat(Segment membership inspection PoC): Surface identity counts in segments UI #7467 directly.
• Missing vs. zero ambiguity in the env dropdown. If memberships omits an env entirely, no chip renders — but the user can't distinguish "0 identities" from "not yet synced". Probably wants a backend contract decision (always emit a row per env with count: 0?).
• Sort order of env options. Alphabetical today; reach-by-count might be more useful for this inspector. Out of scope.

E2E test

The existing e2e/tests/segment-membership-test.pw.ts selectors ([data-test="segment-membership-total"], [data-test="segment-membership-${api_key}"]) are preserved so the spec keeps passing without modification.

How did you test this code?

Manually with a local transformResponse mock injecting synthetic memberships into the segments responses (since the backend PR isn't merged yet). Verified:

• Segments list row chip — filled chip, no ~ago suffix.
• Identities tab label — muted (N) count, readable on both inactive (light) and active (purple) tab states.
• Env dropdown options — name on the left, muted count right-aligned to the column.
• Selected env → Last synced: line populates with the precise timestamp.
• Singular copy (1 identity) when count is 1.
• Empty memberships → no chip/count rendered anywhere.

Existing Playwright spec (segment-membership-test.pw.ts) was inspected to confirm data-test selectors still match — not re-run because it requires the seeded segments project.

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	May 10, 2026 11:23pm
flagsmith-frontend-staging	Ready	Preview, Comment	May 10, 2026 11:23pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored		May 10, 2026 11:23pm

[github-actions]

Docker builds report

Image	Build Status	Security report
ghcr.io/flagsmith/flagsmith-e2e:pr-7475	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-api-test:pr-7475	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7475	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith:pr-7475	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7475	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-7475	Finished ✅	Results ✅

[talissoncosta]

Closing — opened prematurely without confirmation. Will reopen after Talisson validates the proposed changes locally.

[github-actions]

Playwright Test Results (oss - depot-ubuntu-latest-16)

 3 failed

Details

 3 tests across 2 suites
 3.4 seconds
 b92132e
 📦 Artifacts: View test results and HTML report
🔄 Run: #16637 (attempt 1)

Failed tests

firefox › tests/segment-membership-test.pw.ts › Segment membership badges render in list, tab, and env select @oss
firefox › tests/segment-test.pw.ts › Segment test 1 - Create, update, and manage segments with multivariate flags @oss
firefox › tests/segment-test.pw.ts › Segment test 4 - Create ANY rule type segment and verify match changes when rule is updated @oss

### Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

 3 failed

Details

 3 tests across 2 suites
 3.5 seconds
 b92132e
 📦 Artifacts: View test results and HTML report
🔄 Run: #16637 (attempt 1)

Failed tests

firefox › tests/segment-membership-test.pw.ts › Segment membership badges render in list, tab, and env select @oss
firefox › tests/segment-test.pw.ts › Segment test 1 - Create, update, and manage segments with multivariate flags @oss
firefox › tests/segment-test.pw.ts › Segment test 4 - Create ANY rule type segment and verify match changes when rule is updated @oss

[github-actions]

Visual Regression

16 screenshots compared. See report for details.
View full report