Pill labels are centred, with the red dot still shown
Gera, 2026-10-05: centre the pill text. Every PillNav label (Onboarding hub section pills and Settings building chips) is now centred; the dot and the × sit out of the line in the pill's padding.
5 Oct 2026 · branch fix/pillnav-center-labels · captured against propflow-stage · at 839589c766d+local
Data note. Every name and balance below comes from propflow-stage, which is anonymized by construction (ADR-0097/0110 — phones in the impossible +1000 NPA, emails @example.test). The identical capture against prod would carry real tenants' names and balances and is not safe to attach anywhere, which is why the generator refuses to run against one.
1 · Onboarding hub section pills: before (desktop, light)
On main: each pill's name is pushed left, because the red "still open" dot sits in the line after it.
Asserted in the captured DOM — Hours & contact · Fees
Sections 2–16 and notes
2 · Onboarding hub section pills: after (desktop, light)
This PR: each pill's name sits in the centre. The red dot is drawn in the pill's right padding, out of the line, and the left padding is the same width, so the name is centred whether or not a dot is showing, and the pill does not change width when a dot appears. The bar under the current pill spans the pill, so it stays centred under the name.
Asserted in the captured DOM — Hours & contact · Fees
3 · Onboarding hub section pills: before (desktop, dark)
On main: each pill's name is pushed left, because the red "still open" dot sits in the line after it.
Asserted in the captured DOM — Hours & contact · Fees
4 · Onboarding hub section pills: after (desktop, dark)
This PR: each pill's name sits in the centre. The red dot is drawn in the pill's right padding, out of the line, and the left padding is the same width, so the name is centred whether or not a dot is showing, and the pill does not change width when a dot appears. The bar under the current pill spans the pill, so it stays centred under the name.
Asserted in the captured DOM — Hours & contact · Fees
5 · Onboarding hub section pills: before (phone, light)
On main: each pill's name is pushed left, because the red "still open" dot sits in the line after it.
Asserted in the captured DOM — Hours & contact · Fees
6 · Onboarding hub section pills: after (phone, light)
This PR: each pill's name sits in the centre. The red dot is drawn in the pill's right padding, out of the line, and the left padding is the same width, so the name is centred whether or not a dot is showing, and the pill does not change width when a dot appears. The bar under the current pill spans the pill, so it stays centred under the name.
Asserted in the captured DOM — Hours & contact · Fees
7 · Onboarding hub section pills: before (phone, dark)
On main: each pill's name is pushed left, because the red "still open" dot sits in the line after it.
Asserted in the captured DOM — Hours & contact · Fees
8 · Onboarding hub section pills: after (phone, dark)
This PR: each pill's name sits in the centre. The red dot is drawn in the pill's right padding, out of the line, and the left padding is the same width, so the name is centred whether or not a dot is showing, and the pill does not change width when a dot appears. The bar under the current pill spans the pill, so it stays centred under the name.
Asserted in the captured DOM — Hours & contact · Fees
9 · Settings building chips: before (desktop, light)
On main: the building chip's name sits left of centre, with the × after it.
Asserted in the captured DOM — Fairhaven
10 · Settings building chips: after (desktop, light)
This PR: the building chip's name is centred; the × sits in the chip's right padding and the left padding mirrors it. Same rule as the hub pills above, one primitive for both.
Asserted in the captured DOM — Fairhaven
11 · Settings building chips: before (desktop, dark)
On main: the building chip's name sits left of centre, with the × after it.
Asserted in the captured DOM — Fairhaven
12 · Settings building chips: after (desktop, dark)
This PR: the building chip's name is centred; the × sits in the chip's right padding and the left padding mirrors it. Same rule as the hub pills above, one primitive for both.
Asserted in the captured DOM — Fairhaven
13 · Settings building chips: before (phone, light)
On main: the building chip's name sits left of centre, with the × after it.
Asserted in the captured DOM — Fairhaven
14 · Settings building chips: after (phone, light)
This PR: the building chip's name is centred; the × sits in the chip's right padding and the left padding mirrors it. Same rule as the hub pills above, one primitive for both.
Asserted in the captured DOM — Fairhaven
15 · Settings building chips: before (phone, dark)
On main: the building chip's name sits left of centre, with the × after it.
Asserted in the captured DOM — Fairhaven
16 · Settings building chips: after (phone, dark)
This PR: the building chip's name is centred; the × sits in the chip's right padding and the left padding mirrors it. Same rule as the hub pills above, one primitive for both.
Asserted in the captured DOM — Fairhaven
What to look at
Each pair is main first, then this PR, for the hub's section pills and Settings' building chips, at desktop and phone width, light and dark. The name should sit in the middle of every pill; the red dot still shows on sections with open questions; the bar under the current pill lines up with it.