fix(desktop): use Tailwind v4 (--var) syntax for Radix CSS variables

[h4yfans]

Summary

Tailwind v4 removed v3's implicit var() wrapping inside square-bracket arbitrary values. A class like w-[--radix-dropdown-menu-trigger-width] now compiles to:

width: --radix-dropdown-menu-trigger-width;  /* bare custom-property name where a length belongs */

That is invalid CSS, so the browser drops the declaration entirely and the class silently does nothing. Verified by compiling through the workspace's own Tailwind:

Source	Compiles to
w-[--x]	width: --x	invalid, dropped
w-(--x)	width: var(--x)	correct
w-[var(--x)]	width: var(--x)	also correct

This converts all nine remaining instances in apps/desktop/src/renderer/src to the v4 (--var) shorthand. components/ui/context-menu.tsx already used that form and served as the style reference.

Real layout impact — the floating element never matched its trigger width:

• components/nav-user.tsx — w-(--radix-dropdown-menu-trigger-width)
• components/team-switcher.tsx — same
• components/ui/picker/picker-content.tsx — w-(--radix-popover-trigger-width); the width="trigger" prop was a no-op until now
• components/ui/select.tsx — max-h-(--radix-select-content-available-height); long select menus had no viewport height cap

Animation origin silently fell back to center instead of the popper-anchored corner:

• components/ui/dropdown-menu.tsx (2 instances), select.tsx, popover.tsx, hover-card.tsx, tooltip.tsx

Note for reviewers

Two changes fall outside the strict scope, both flagged deliberately:

1. select.tsx max-h- — the brief listed eight instances and said the max-h- ones were already fixed. One was not: max-h-[--radix-select-content-available-height] sits on the same line as the origin class in select.tsx:69. Same bug class, and the verification grep still flagged it, so it is fixed here.
2. team-switcher.tsx text-left → text-start, ml-auto → ms-auto — pre-existing physical Tailwind classes, unrelated to this fix. The pre-commit renderer guard scans whole staged files rather than changed lines, so touching the file requires clearing them. Both conversions are RTL-correct.

No behavior is gated or changed beyond CSS that previously did not apply. Purely additive to what the browser actually renders — no migration or compat concern.

Release note

Dropdown and popover menus now correctly match the width of the control that opens them, and open/close animations anchor to the right corner instead of scaling from the center.

Test plan

• grep -rnE "[a-z0-9-]+-\[--[a-z0-9-]+\]" apps/desktop/src/renderer — no matches remain (exit 1)
• pnpm --filter @memry/desktop typecheck:web — clean
• pnpm --filter @memry/desktop test:renderer — 559 files, 6301 passed, 6 skipped, 0 failed

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 862b499.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!