From 862b499abc6d8f530c0c586fe514762a8bc7bb3b Mon Sep 17 00:00:00 2001
From: Kaan Karaca <kaan94karaca@gmail.com>
Date: Fri, 7 Aug 2026 14:42:16 +0300
Subject: [PATCH] fix(desktop): use Tailwind v4 (--var) syntax for Radix CSS
 variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tailwind v4 removed v3's implicit var() wrapping inside square-bracket
arbitrary values, so `w-[--radix-popover-trigger-width]` now compiles to
`width: --radix-popover-trigger-width` — a bare custom-property name where
a length belongs. That is invalid CSS, so the browser drops the whole
declaration and the class silently does nothing.

Converted all nine remaining instances to the v4 `(--var)` shorthand,
matching context-menu.tsx which already used the correct form.

Real layout impact — dropdown/popover no longer matches its trigger width:
- nav-user.tsx, team-switcher.tsx: w-(--radix-dropdown-menu-trigger-width)
- picker-content.tsx: w-(--radix-popover-trigger-width); the `width="trigger"`
  prop was a no-op until now
- select.tsx: max-h-(--radix-select-content-available-height); long select
  menus had no viewport height cap

Animation origin fell back to `center` instead of the popper-anchored corner:
- dropdown-menu.tsx (x2), select.tsx, popover.tsx, hover-card.tsx, tooltip.tsx

Also converts two pre-existing physical Tailwind classes in team-switcher.tsx
(text-left -> text-start, ml-auto -> ms-auto) — the pre-commit renderer guard
scans whole staged files, so touching the file requires clearing them.

Verified: grep for the v3 pattern returns no matches, typecheck:web clean,
test:renderer 559 files / 6301 passed.
---
 apps/desktop/src/renderer/src/components/nav-user.tsx       | 2 +-
 apps/desktop/src/renderer/src/components/team-switcher.tsx  | 6 +++---
 .../src/renderer/src/components/ui/dropdown-menu.tsx        | 4 ++--
 apps/desktop/src/renderer/src/components/ui/hover-card.tsx  | 2 +-
 .../renderer/src/components/ui/picker/picker-content.tsx    | 2 +-
 apps/desktop/src/renderer/src/components/ui/popover.tsx     | 2 +-
 apps/desktop/src/renderer/src/components/ui/select.tsx      | 2 +-
 apps/desktop/src/renderer/src/components/ui/tooltip.tsx     | 2 +-
 8 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/renderer/src/components/nav-user.tsx b/apps/desktop/src/renderer/src/components/nav-user.tsx
index 9c5520d06..0f08f4c28 100644
--- a/apps/desktop/src/renderer/src/components/nav-user.tsx
+++ b/apps/desktop/src/renderer/src/components/nav-user.tsx
@@ -76,7 +76,7 @@ export function NavUser({
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-md"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-md"
             side={isMobile ? 'bottom' : 'right'}
             align="end"
             sideOffset={4}
diff --git a/apps/desktop/src/renderer/src/components/team-switcher.tsx b/apps/desktop/src/renderer/src/components/team-switcher.tsx
index ef341a529..014885b9e 100644
--- a/apps/desktop/src/renderer/src/components/team-switcher.tsx
+++ b/apps/desktop/src/renderer/src/components/team-switcher.tsx
@@ -50,14 +50,14 @@ export function TeamSwitcher({
               <div className="flex aspect-square size-6 items-center justify-center rounded-full bg-sidebar-primary text-sidebar-primary-foreground">
                 <activeTeam.logo className="size-3" />
               </div>
-              <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+              <div className="grid flex-1 text-start text-sm leading-tight group-data-[collapsible=icon]:hidden">
                 <span className="truncate font-normal">{activeTeam.name}</span>
               </div>
-              <ChevronsUpDown className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
+              <ChevronsUpDown className="ms-auto size-4 group-data-[collapsible=icon]:hidden" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-64 rounded-xl p-2 shadow-lg border border-gray-200/80"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-64 rounded-xl p-2 shadow-lg border border-gray-200/80"
             align="start"
             side={isMobile ? 'bottom' : 'right'}
             sideOffset={8}
diff --git a/apps/desktop/src/renderer/src/components/ui/dropdown-menu.tsx b/apps/desktop/src/renderer/src/components/ui/dropdown-menu.tsx
index f61961a5a..a44f22795 100644
--- a/apps/desktop/src/renderer/src/components/ui/dropdown-menu.tsx
+++ b/apps/desktop/src/renderer/src/components/ui/dropdown-menu.tsx
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
     <DropdownMenuPrimitive.SubContent
       ref={ref}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-[var(--shadow-card-hover)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-[var(--shadow-card-hover)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)',
         'floating-content-motion',
         className
       )}
@@ -67,7 +67,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         'z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-[var(--shadow-card-hover)]',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)',
         'floating-content-motion',
         className
       )}
diff --git a/apps/desktop/src/renderer/src/components/ui/hover-card.tsx b/apps/desktop/src/renderer/src/components/ui/hover-card.tsx
index 1bdde5d1f..7aa0b2ee2 100644
--- a/apps/desktop/src/renderer/src/components/ui/hover-card.tsx
+++ b/apps/desktop/src/renderer/src/components/ui/hover-card.tsx
@@ -17,7 +17,7 @@ const HoverCardContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]',
+        'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin)',
         'floating-content-motion',
         className
       )}
diff --git a/apps/desktop/src/renderer/src/components/ui/picker/picker-content.tsx b/apps/desktop/src/renderer/src/components/ui/picker/picker-content.tsx
index 114557470..b6d4b13ad 100644
--- a/apps/desktop/src/renderer/src/components/ui/picker/picker-content.tsx
+++ b/apps/desktop/src/renderer/src/components/ui/picker/picker-content.tsx
@@ -16,7 +16,7 @@ export const PickerContent = React.forwardRef<
     width === 'auto'
       ? 'w-auto'
       : width === 'trigger'
-        ? 'w-[--radix-popover-trigger-width]'
+        ? 'w-(--radix-popover-trigger-width)'
         : typeof width === 'number'
           ? undefined
           : 'w-72'
diff --git a/apps/desktop/src/renderer/src/components/ui/popover.tsx b/apps/desktop/src/renderer/src/components/ui/popover.tsx
index e922ac1c5..59969523a 100644
--- a/apps/desktop/src/renderer/src/components/ui/popover.tsx
+++ b/apps/desktop/src/renderer/src/components/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]',
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin)',
         'floating-content-motion',
         className
       )}
diff --git a/apps/desktop/src/renderer/src/components/ui/select.tsx b/apps/desktop/src/renderer/src/components/ui/select.tsx
index ea37d68d4..d37814b7c 100644
--- a/apps/desktop/src/renderer/src/components/ui/select.tsx
+++ b/apps/desktop/src/renderer/src/components/ui/select.tsx
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]',
+        'relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)',
         'floating-content-motion',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
diff --git a/apps/desktop/src/renderer/src/components/ui/tooltip.tsx b/apps/desktop/src/renderer/src/components/ui/tooltip.tsx
index 756ad6c8d..61eb60857 100644
--- a/apps/desktop/src/renderer/src/components/ui/tooltip.tsx
+++ b/apps/desktop/src/renderer/src/components/ui/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]',
+        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)',
         className
       )}
       {...props}