From 5a96bb490adafaa830d5424ab1f1649e87d11a79 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 3 Jul 2026 19:01:16 -0300
Subject: [PATCH] Make the language and font dropdowns match their trigger
 width

The PopoverContent used w-[--reka-popover-trigger-width], which Tailwind v4
compiles to the invalid `width: --reka-popover-trigger-width`, so the dropdown
collapsed to its content width. Use the v4 CSS-variable syntax
w-(--reka-popover-trigger-width) so it resolves to var(...) and spans the full
trigger width, matching the SearchableSelect component.
---
 resources/js/components/FontPicker.vue     | 2 +-
 resources/js/components/LanguagePicker.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/FontPicker.vue b/resources/js/components/FontPicker.vue
index ff1359b6..fc9bfcef 100644
--- a/resources/js/components/FontPicker.vue
+++ b/resources/js/components/FontPicker.vue
@@ -91,7 +91,7 @@ const select = (font: string) => {
             </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="searchPlaceholder" />
                 <CommandList>
diff --git a/resources/js/components/LanguagePicker.vue b/resources/js/components/LanguagePicker.vue
index 9826d597..5e6e2d3d 100644
--- a/resources/js/components/LanguagePicker.vue
+++ b/resources/js/components/LanguagePicker.vue
@@ -53,7 +53,7 @@ const select = (code: string) => {
             </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="searchPlaceholder" />
                 <CommandList>