fix(admin): stop the users list clipping its role badges #419

Merged

Claude-Run merged 1 commit from fix/BUNYIP-421-admin-panel-clipping into main

2026-07-31 16:34:52 +02:00

Claude-Run commented

2026-07-31 16:29:48 +02:00

Member

The identity cell in the admin users list put Tailwind's truncate on the same element that was also flex: p class="font-medium truncate flex items-center gap-2". truncate expands to overflow:hidden + text-overflow:ellipsis + white-space:nowrap, but the ellipsis and nowrap parts do nothing on a flex container - they apply to inline text layout, not to flex items. So the email took its full max-content width, pushed the "Admin" / "Suspended" badges past the row's content box, and the overflow:hidden painted none of them. The badge was in the DOM and completely invisible on screen, and the email itself was hard-clipped mid-glyph with no ellipsis. Reproduced in headless Chrome against the real rendered page: at 1024px and below the Admin badge overflowed the row by 195px and was clipped away entirely.

Move truncate onto a span around the text and give the row min-w-0 so it can still shrink inside the grid cell. The email now ellipsises and the badges stay visible.

The sessions list in the user dashboard had the identical shape (This device badge behind a long user-agent string), so it gets the same treatment. A shared test-only helper, assert_no_truncating_flex_container, fails on any rendered class attribute carrying both truncate and a flex/grid display class, and both call sites are covered by a test that renders a row with an over-long label and asserts the badge survives. Reverting either markup change makes those tests fail.

#BUNYIP-421

The identity cell in the admin users list put Tailwind's `truncate` on the same element that was also `flex`: `p class="font-medium truncate flex items-center gap-2"`. `truncate` expands to `overflow:hidden` + `text-overflow:ellipsis` + `white-space:nowrap`, but the ellipsis and nowrap parts do nothing on a flex container - they apply to inline text layout, not to flex items. So the email took its full max-content width, pushed the "Admin" / "Suspended" badges past the row's content box, and the `overflow:hidden` painted none of them. The badge was in the DOM and completely invisible on screen, and the email itself was hard-clipped mid-glyph with no ellipsis. Reproduced in headless Chrome against the real rendered page: at 1024px and below the Admin badge overflowed the row by 195px and was clipped away entirely. Move `truncate` onto a `span` around the text and give the row `min-w-0` so it can still shrink inside the grid cell. The email now ellipsises and the badges stay visible. The sessions list in the user dashboard had the identical shape (`This device` badge behind a long user-agent string), so it gets the same treatment. A shared test-only helper, `assert_no_truncating_flex_container`, fails on any rendered class attribute carrying both `truncate` and a flex/grid display class, and both call sites are covered by a test that renders a row with an over-long label and asserts the badge survives. Reverting either markup change makes those tests fail. #BUNYIP-421

Claude-Run added 1 commit

2026-07-31 16:29:48 +02:00

fix(admin): stop the users list clipping its role badges

E2E / Playwright against deployment (pull_request) Successful in 53s

Details

Check / fmt + clippy + build + tests (pull_request) Successful in 4m5s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

6a9a7c19a1

The identity cell in the admin users list put Tailwind's `truncate` on the same element that was also `flex`: `p class="font-medium truncate flex items-center gap-2"`. `truncate` expands to `overflow:hidden` + `text-overflow:ellipsis` + `white-space:nowrap`, but the ellipsis and nowrap parts do nothing on a flex container - they apply to inline text layout, not to flex items. So the email took its full max-content width, pushed the "Admin" / "Suspended" badges past the row's content box, and the `overflow:hidden` painted none of them. The badge was in the DOM and completely invisible on screen, and the email itself was hard-clipped mid-glyph with no ellipsis. Reproduced in headless Chrome against the real rendered page: at 1024px and below the Admin badge overflowed the row by 195px and was clipped away entirely.

Move `truncate` onto a `span` around the text and give the row `min-w-0` so it can still shrink inside the grid cell. The email now ellipsises and the badges stay visible.

The sessions list in the user dashboard had the identical shape (`This device` badge behind a long user-agent string), so it gets the same treatment. A shared test-only helper, `assert_no_truncating_flex_container`, fails on any rendered class attribute carrying both `truncate` and a flex/grid display class, and both call sites are covered by a test that renders a row with an over-long label and asserts the badge survives. Reverting either markup change makes those tests fail.

#BUNYIP-421