Skip to content

Segmented control: Fix the selected pill size on first paint - #515

Merged
AllTerrainDeveloper merged 1 commit into
trunkfrom
claude/preferences-active-option-cutoff-6a4ece
Aug 7, 2026
Merged

Segmented control: Fix the selected pill size on first paint#515
AllTerrainDeveloper merged 1 commit into
trunkfrom
claude/preferences-active-option-cutoff-6a4ece

Conversation

@mmtr

@mmtr mmtr commented Aug 6, 2026

Copy link
Copy Markdown
Collaborator

Proposed Changes

Fixes the lit pill behind the selected option in a segmented control rendering smaller than its label on first paint, so the text overhangs it on both sides. Visible on OpenStation Preferences > Appearance (Desktop layout, Dock size, Window corners, Admin bar). Picking any option corrects it, and it stays correct.

Before After
Screenshot 2026-08-06 at 17 47 14 Screenshot 2026-08-06 at 17 59 19

Why are these changes being made?

Because the UI looked broken.

Testing Instructions

  1. Load /wp-admin and open OpenStation Preferences from the dock, then the Appearance tab.
  2. Without clicking anything, make sure the lit pill wraps its label exactly on Desktop layout, Dock size and Window corners. The label must not stick out on either side.
  3. Scroll to Admin bar further down the tab and make sure the same holds there.
  4. Close the window and reopen it five or six times. Make sure the pill is right on every open, not just some.
  5. Click through the options in each control. Make sure the pill slides across and lands wrapping the new label.
  6. Drag the window's bottom-right corner to make the panel reflow. Make sure the pill follows its label.
  7. Reload the page so the session restores the window. Make sure the pills are still right.
Open WordPress Playground Preview

The thumb is placed from getBoundingClientRect, which reports boxes
through every ancestor transform. A window plays os-window--opening
(scale 0.92 to 1) while the panel inside it renders, so the pill was
measured at 0.92 and stayed there: a transform does not resize the
border box, so the ResizeObserver never fired when the animation
landed. Picking another option re-measured it at scale 1, which is
why it only looked wrong until you touched it.

Divide the scale back out, using offsetWidth as the untransformed
border box. Ratios within 0.02 of 1 are treated as 1, since
offsetWidth is integer-rounded and the group is content-sized, so
the ratio is never quite 1 even with no transform in play.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@mmtr mmtr self-assigned this Aug 6, 2026
@AllTerrainDeveloper
AllTerrainDeveloper merged commit 4cee78e into trunk Aug 7, 2026
10 of 17 checks passed
@AllTerrainDeveloper
AllTerrainDeveloper deleted the claude/preferences-active-option-cutoff-6a4ece branch August 7, 2026 07:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants