What is wrong
In a badge-list column, three states should start on the same left edge: empty, one chip, and overflow-only (+N with no chip beside it). Overflow-only is shifted right by the list gap. The +N chip also uses different padding than the chips it replaces.
Cause
web/src/components/SingleLineOverflowList.tsx — the visible-items flex child is rendered even when every item is hidden, so the parent gap still applies. createBadgeListTableColumn renders item chips and the overflow chip with two different Badge treatments, and returns nullValue as a plain string instead of EmptyValue.
Do this
In SingleLineOverflowList, apply the gap only between real content. An overflow-only row must start where the first chip starts. Do not leave an empty flex child in the gap. Keep the ResizeObserver measurement; that effect owns DOM measurement.
In createBadgeListTableColumn, render visible chips and the +N chip through one treatment (same padding, radius, type). No new className override.
Empty lists render EmptyValue. Drop the "-" nullValue on the members SSO column. Check the other badge-list callers (gateway models, gateway API keys, skills) so empty cells match.
Move SingleLineOverflowList into the design system and remove the boundary disable that exists only to import it. Point the rules table, rule filter pills, and session header at that component.
Add a Storybook story for the badge-list column: empty, one chip, chip plus overflow, and overflow-only, in a column narrow enough that two chips do not fit. No client test that asserts pixel offsets.
Check
Project members and organization members (SSO provider), gateway models (Available via, API formats), gateway API keys (Metadata), skills (Tags), rules table evaluator chips, rule filter pills, session header. Overflow-only and single-chip rows line up. Empty cells are the em dash.
What is wrong
In a badge-list column, three states should start on the same left edge: empty, one chip, and overflow-only (+N with no chip beside it). Overflow-only is shifted right by the list gap. The +N chip also uses different padding than the chips it replaces.
Cause
web/src/components/SingleLineOverflowList.tsx — the visible-items flex child is rendered even when every item is hidden, so the parent gap still applies. createBadgeListTableColumn renders item chips and the overflow chip with two different Badge treatments, and returns nullValue as a plain string instead of EmptyValue.
Do this
In SingleLineOverflowList, apply the gap only between real content. An overflow-only row must start where the first chip starts. Do not leave an empty flex child in the gap. Keep the ResizeObserver measurement; that effect owns DOM measurement.
In createBadgeListTableColumn, render visible chips and the +N chip through one treatment (same padding, radius, type). No new className override.
Empty lists render EmptyValue. Drop the "-" nullValue on the members SSO column. Check the other badge-list callers (gateway models, gateway API keys, skills) so empty cells match.
Move SingleLineOverflowList into the design system and remove the boundary disable that exists only to import it. Point the rules table, rule filter pills, and session header at that component.
Add a Storybook story for the badge-list column: empty, one chip, chip plus overflow, and overflow-only, in a column narrow enough that two chips do not fit. No client test that asserts pixel offsets.
Check
Project members and organization members (SSO provider), gateway models (Available via, API formats), gateway API keys (Metadata), skills (Tags), rules table evaluator chips, rule filter pills, session header. Overflow-only and single-chip rows line up. Empty cells are the em dash.