Skip to content

fix(studio): a menu row's highlight is rounder than its panel - #7395

Merged
miguel-heygen merged 1 commit into
mainfrom
ddeep/menu-item-radius
Nov 8, 2026
Merged

miguel-heygen merged 1 commit into
mainfrom
ddeep/menu-item-radius

Conversation

@miguel-heygen

@miguel-heygen miguel-heygen commented Nov 8, 2026 •

Copy link
Copy Markdown
Collaborator

A menu row's hover and keyboard highlight now has a larger corner radius than the panel around it, so the highlight reads as sitting inside the menu instead of cutting its corners.

The row radius was rounded-sm (4px) inside a rounded-lg panel. It is now the panel radius plus 6px (calc(var(--radius-lg) + 6px)): 14px in the default theme, 18px where a host sets --radius-lg to 12px. It is set once on the shared row class in Menu.tsx, so every MenuItem (and the radio items built on it) changes together. Padding, height and gap are untouched, so no row moves.

What I measured

  • Row and panel rects in a browser, before vs after, 3 menus in both themes: identical x, y, width, height for the panel and every row. Computed row radius 4px -> 14px, panel 8px both.
  • Menu.test.tsx, menuStyle.test.ts and src/styles: 8 files, 68 tests pass on miga.
  • The new test passes with this change and fails with the old rounded-sm class: run both ways on miga.

fails without the fix: packages/studio/src/components/ui/Menu.test.tsx > "open motion" > "rounds a row's highlight more than the panel that holds it" (itemBase put back to rounded-sm: 1 failed)

What I did NOT exercise

  • Desktop's own menus (brand kit, preview, project): the captures below render the real Studio Menu in a harness, three shapes (plain rows, icon and shortcut rows, a separator with a danger row), not Desktop's menus.
  • Not run in Desktop. Desktop picks the change up with its next pin of the Studio package.

Size

A lone one-class fix at the single owner of the row shape; nothing else carries it.

Before

Before: three menus, dark on the left, light on the right, first row hovered

After

After: the same menus, rows now rounder than the panel

@heygengenesis heygengenesis Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Requesting changes at 6aa7a03c. There is one blocker, and it is in the PR body, not the code.

Blocker: this is a fix PR (fix(studio): …), but the body has no fails without the fix: line naming the test. The prose under "What I measured" describes the test, but the review gate needs that exact line. Please add, for example:

fails without the fix: packages/studio/src/components/ui/Menu.test.tsx › "open motion" › "rounds a row's highlight more than the panel that holds it"

What I verified, so a re-review can be quick once the line is added:

  • Menu.test.tsx passes at this head: 16/16.
  • With itemBase put back to rounded-sm, exactly that test fails: 1 failed, 15 passed. So the test does guard the change.
  • The diff is one class on the shared itemBase, so every MenuItem and the radio items built on it change together. Padding, gap and height classes are unchanged.

Non-blocking notes:

  • calc(var(--radius-lg)+6px) is 14px by default. A row is py-1.5 plus a text-step-11 line, about 28px tall, so the highlight is effectively a pill. At --radius-lg: 12px the 18px value is capped at half the row height, so it stays a pill. That reads as the intended design choice, but the radius is no longer concentric with the panel (panel radius minus p-1 would be 4px). Worth confirming the pill look in the before/after captures.
  • The body says visual evidence: pending.

@heygengenesis heygengenesis Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving at 6aa7a03c.

The head is the same one I reviewed, and the body now has the fails without the fix: line. It names Menu.test.tsx › "open motion" › "rounds a row's highlight more than the panel that holds it". I had already checked that test both ways at this head:

  • It passes with this change: 16/16.
  • It is the only failure with itemBase put back to rounded-sm: 1 failed, 15 passed.

That line was the only blocker. My earlier non-blocking notes on the pill radius and the pending visual evidence still stand.

@github-actions

github-actions Bot commented Nov 8, 2026 •

Copy link
Copy Markdown
Contributor

Edit accuracy: accurate 267 (base branch 267), smooth 100 of those

The gate passes.
Smoothness is reported in the artifact, not gated. A case fails only if it fails 2 of 3 runs.

Quarantined, measured but not gated (8)

Unstable (2)

  • seqplainkeys-none-pct-r0-nested-z100: tracking 0.05, pressJump 0, drop 0, reload 0, render 0.02, renderKey -, undo true, teleport true / tracking 0.05, pressJump 0, drop 0, reload 0, render 0.02, renderKey -, undo true, teleport true / tracking 0.05, pressJump 0, drop 0, reload 0, render 0.02, renderKey -, undo true, teleport true
  • seqab-none-pct-r0-root-z100: tracking 0.05, pressJump 0, drop 0, reload 0, render 0.03, renderKey -, undo true, teleport true / tracking 0.05, pressJump 0, drop 0, reload 0, render 0.03, renderKey -, undo true, teleport true / tracking 0.05, pressJump 0, drop 0, reload 0, render 0.03, renderKey -, undo true, teleport true

@miguel-heygen
miguel-heygen added this pull request to the merge queue Nov 8, 2026
Merged via the queue into main with commit ab785e9 Nov 8, 2026
287 of 292 checks passed
@miguel-heygen
miguel-heygen deleted the ddeep/menu-item-radius branch November 8, 2026 04:57
SanHsien added a commit to SanHsien/hyperframes that referenced this pull request Nov 9, 2026
Port the adopted upstream fixes from f5bde95 to the current upstream tip:
heygen-com#7375 multipart cloud upload, heygen-com#7382 minParallelChunks, heygen-com#7349 HLG header SEI,
heygen-com#7369 skip unmounted compositions in lint/check, heygen-com#7381 filesystem-path media
in the cloud archive, heygen-com#7383 Safari cut-point pre-roll revert, heygen-com#7373 clock
steering between audio time updates, heygen-com#7384 injector test isolation, heygen-com#7378
preview seek retention, heygen-com#7390 virtual timer schedule per worker, heygen-com#7394 CDN
script failure naming, heygen-com#7395 menu row radius, heygen-com#7119 decode timeout caller
test, heygen-com#7397 authored tween order, heygen-com#7402 capture page clip loading, heygen-com#7412 muted
video audio track at cuts, heygen-com#6150 template root variable test, heygen-com#7442 held tail
seek once.

Deliberate local differences: heygen-com#7067's audio-start hold is not carried into
clock.ts, mountedSources comes from heygen-com#6827 as a helper only, cloud/_gen/types.ts
omits the image-request types the fork does not generate, and the lint
symlink test skips through symlinkOrSkip where the account cannot create links.

Co-Authored-By: Claude Sonnet <noreply@anthropic.com>
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.

1 participant