From ec808bdea81464263e01cda8fbf8775a997bbe88 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 3 Jul 2026 19:32:52 -0300
Subject: [PATCH] Fix the remaining reka trigger-width dropdowns for Tailwind
 v4

The workspace switcher menu, the label filter, and the templates category
popover still used the v3 bracket syntax w-[--reka-*-trigger-width], which
Tailwind v4 compiles to an invalid `width: --reka-...` so the floating content
no longer matched its trigger. Switch them to the v4 CSS-variable syntax
w-(--reka-*-trigger-width), matching the FontPicker/LanguagePicker fix.
---
 resources/js/components/AppSidebar.vue         | 2 +-
 resources/js/components/labels/LabelFilter.vue | 2 +-
 resources/js/pages/posts/templates/Index.vue   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index c4e714fc..ec4ade9f 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -199,7 +199,7 @@ const handleCreateWorkspace = () => {
                                 <IconChevronRight class="ml-auto size-4" />
                             </SidebarMenuButton>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56"
+                        <DropdownMenuContent class="w-(--reka-dropdown-menu-trigger-width) min-w-56"
                             align="start" side="right" :side-offset="4">
                             <DropdownMenuLabel>
                                 {{ $t('sidebar.workspaces') }}
diff --git a/resources/js/components/labels/LabelFilter.vue b/resources/js/components/labels/LabelFilter.vue
index 66aadc09..b2b44f79 100644
--- a/resources/js/components/labels/LabelFilter.vue
+++ b/resources/js/components/labels/LabelFilter.vue
@@ -102,7 +102,7 @@ const clear = () => {
             </Button>
         </PopoverTrigger>
 
-        <PopoverContent class="w-[--reka-popover-trigger-width] min-w-[220px] p-0" align="start">
+        <PopoverContent class="w-(--reka-popover-trigger-width) min-w-[220px] p-0" align="start">
             <Command>
                 <CommandInput :placeholder="trans('posts.label_search_placeholder')" />
                 <CommandList>
diff --git a/resources/js/pages/posts/templates/Index.vue b/resources/js/pages/posts/templates/Index.vue
index 184214e8..73cebd8c 100644
--- a/resources/js/pages/posts/templates/Index.vue
+++ b/resources/js/pages/posts/templates/Index.vue
@@ -211,7 +211,7 @@ const pageTitle = computed(() => trans('posts.templates.browser_title'));
                             <IconChevronDown class="ml-2 size-4 shrink-0 text-foreground/60" />
                         </Button>
                     </PopoverTrigger>
-                    <PopoverContent class="w-[--reka-popover-trigger-width] p-0" align="start">
+                    <PopoverContent class="w-(--reka-popover-trigger-width) p-0" align="start">
                         <Command>
                             <CommandInput :placeholder="$t('posts.templates.platform_search_placeholder')" />
                             <CommandList>