GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — fix(site/src): show truncated filter labels in a tooltip by chrifro · Pull Request #32054 · coder/coder

Conversation

@chrifro

@chrifro chrifro commented Nov 11, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor

Under WCAG 1.4.12 text spacing overrides (letter spacing 0.12em, word spacing 0.16em, line height 1.5), the SelectFilter trigger and options cut their labels off with no way to read the full text. Examples are "All providers" on AI Gateway sessions and "All resource types" and "All organizations" on the audit log.

  • Trigger: stays on one line with an ellipsis. When the label is cut off, ComboboxButton shows the full label in a tooltip on hover and keyboard focus. The tooltip only opens if the label is truncated at the moment it opens, so a spacing override applied after load is still caught. It stays closed while the dropdown is open so it never covers the list.
  • Width: the filters are a little wider so the default placeholders fit under spacing: AI Gateway sessions 150 to 165px, audit log 175px (multi-org) or 200px to 210px.
  • Options: long option labels in the dropdown wrap instead of truncating, because cmdk options never receive DOM focus and so can't show a focus tooltip.

ComboboxButton is shared, so its six form callers (workspace version, preset, IdP sync, AI budget dialogs) also get the tooltip when their selected value is truncated. That's additive: they truncated on main too, with no way to read the full text.

The W3C Understanding document for 1.4.12 allows ellipses caused by spacing overrides "so long as the content is still available". The tooltip is how the content stays available here.

Closes DEQ-365
Closes DEQ-430

Ticket Surface Screenshots
DEQ-365 Audit log filters (resource type, organization) before/after
DEQ-430 AI Gateway sessions filters (provider, model) before/after
Grouping, decisions, and review notes

Grouping. The batch label text-spacing-cut-off had three eligible tickets with two root causes. DEQ-365 and DEQ-430 come from the shared SelectFilter/ComboboxButton and are fixed here. DEQ-434 comes from StaticWidth in agent metadata and is fixed in #32055.

Revision. The first version wrapped the trigger label onto several lines. A human reviewer rejected that, so the trigger now truncates on one line and shows a tooltip, with a little more width.

Tooltip details.

  • The tooltip is a controlled Radix Tooltip, and onOpenChange compares the label's scrollWidth to its clientWidth.
  • The trigger combines the popover trigger and the tooltip trigger, both rendered asChild. The popover's data-state and aria-expanded win, so the chevron still rotates. I verified this in the browser.
  • The tooltip opens on focus as well as hover. Escape and moving the pointer onto it work as WCAG 1.4.13 requires, through the Radix defaults.

Verification.

  • I injected the WCAG spacing stylesheet into Storybook (pages/AuditPage MultiOrg, pages/AIBridgePage/ListSessionsFilter Default) and listed elements whose scrollWidth exceeded clientWidth. On main, "All providers", "All resource types" and "All organizations" are clipped. On this branch, nothing is clipped and every trigger stays 40px tall.
  • A truncated label shows its tooltip on hover and on focus. A label that fits gets none, with or without spacing.
  • New Vitest cases check that the focused trigger's accessible description is the full label when it's truncated, and empty when it fits.
  • The new LongLabelTooltip story gives Pixel the tooltip-open state.

Accessibility audit (axe 4.11, WCAG A/AA and best practices). No new violations. aria-dialog-name on the popover already fails on main, and this diff doesn't touch it.

Review findings.

  • Applied: keep the tooltip closed while the popover is open (should-fix), and split a conditional it.each into two plain tests (nit).
  • Accepted: when the label isn't truncated, refusing the controlled open still sends Radix's tooltip-open event to the provider. The only effect is a 100ms skip-delay window, so I didn't add pointer and focus handlers to avoid it.
  • Accepted: after a mouse user picks an option, focus returns to the trigger, so a truncated label's tooltip opens. That matches the keyboard behavior.

Doc check. No docs describe filter label truncation, so no docs changes are needed.

🤖 Generated by Coder Agents on behalf of @chrifro.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
chrifro added 2 commits November 11, 2026 14:29
@chrifro
fix(site/src/components): wrap SelectFilter labels instead of truncating
1b80eb9
@chrifro
test(site/src/components/Filter): constrain LongLabels story so the t…
dc28c5b
…rigger wraps
@chrifro
chrifro temporarily deployed to main November 11, 2026 14:57 — with GitHub Actions Inactive
@chrifro
chrifro temporarily deployed to main November 11, 2026 14:57 — with GitHub Actions Inactive
@linear-code

linear-code Bot commented Nov 11, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown

DEQ-430

DEQ-365

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@github-actions github-actions Bot assigned chrifro Nov 11, 2026
@chrifro
chrifro temporarily deployed to main November 11, 2026 15:00 — with GitHub Actions Inactive
@chrifro
chrifro marked this pull request as ready for review November 11, 2026 15:07
@chrifro
chrifro temporarily deployed to main November 11, 2026 15:07 — with GitHub Actions Inactive
@chrifro
fix(site/src): keep filter labels on one line and show truncated labe…
af128ef
…ls in a tooltip
@chrifro
chrifro marked this pull request as draft November 12, 2026 14:06
@chrifro
chrifro temporarily deployed to main November 12, 2026 14:06 — with GitHub Actions Inactive
@chrifro chrifro changed the title fix(site/src/components): wrap SelectFilter labels instead of truncating fix(site/src): show truncated filter labels in a tooltip Nov 12, 2026
@chrifro
chrifro temporarily deployed to main November 12, 2026 14:08 — with GitHub Actions Inactive
@chrifro
chrifro marked this pull request as ready for review November 12, 2026 15:30
@chrifro
chrifro temporarily deployed to main November 12, 2026 15:30 — with GitHub Actions Inactive

This branch was previously deployed

1 inactive deployment
main — af128ef5 Deployed Nov 12, 2026 by chrifro via cla #254998
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Uh oh!

There was an error while loading. Please reload this page.

Assignees

@chrifro chrifro

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Uh oh!

There was an error while loading. Please reload this page.

1 participant

@chrifro
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.