From fc69ef33a24ef4d941e15544a830fb5e3ca5908c Mon Sep 17 00:00:00 2001
From: "LAPTOP-O016UC3M\\Qi Chen" <16399091+binaricat@users.noreply.github.com>
Date: Thu, 11 Dec 2025 17:36:53 +0800
Subject: [PATCH] Unifies popover and dropdown border styling

Standardizes border appearance for popover and dropdown UI components
by applying a consistent border color and style, enhancing visual
cohesion across interactive elements.
---
 components/ui/combobox.tsx | 6 ++++--
 components/ui/dropdown.tsx | 2 +-
 components/ui/popover.tsx  | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/ui/combobox.tsx b/components/ui/combobox.tsx
index e27a89bec..5e4de765c 100644
--- a/components/ui/combobox.tsx
+++ b/components/ui/combobox.tsx
@@ -146,10 +146,11 @@ export function Combobox({
                 </div>
             </PopoverTrigger>
             <PopoverContent
-                className={cn("p-0 w-[--radix-popover-trigger-width]", className)}
+                className={cn("p-0 border-border/60", className)}
                 align="start"
                 sideOffset={4}
                 onOpenAutoFocus={(e) => e.preventDefault()}
+                style={{ width: 'var(--radix-popover-trigger-width)' }}
             >
                 {/* Options List */}
                 <ScrollArea className="max-h-[280px]">
@@ -351,10 +352,11 @@ export function MultiCombobox({
                 </div>
             </PopoverTrigger>
             <PopoverContent
-                className={cn("p-0 w-[--radix-popover-trigger-width]", className)}
+                className={cn("p-0 border-border/60", className)}
                 align="start"
                 sideOffset={4}
                 onOpenAutoFocus={(e) => e.preventDefault()}
+                style={{ width: 'var(--radix-popover-trigger-width)' }}
             >
                 {/* Options List */}
                 <ScrollArea className="max-h-[280px]">
diff --git a/components/ui/dropdown.tsx b/components/ui/dropdown.tsx
index 9c24b30fb..26079df47 100644
--- a/components/ui/dropdown.tsx
+++ b/components/ui/dropdown.tsx
@@ -242,7 +242,7 @@ const DropdownContent: React.FC<DropdownContentProps> = ({
     <div
       ref={contentRef}
       className={cn(
-        "fixed z-[999999] rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "fixed z-[999999] rounded-md border border-border/60 bg-popover p-1 text-popover-foreground shadow-md",
         className,
       )}
       style={{
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index d8ed22a73..f1074938b 100755
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -57,7 +57,7 @@ const PopoverContent = React.forwardRef<
           visibility: isPositioned ? 'visible' : 'hidden',
         }}
         className={cn(
-          "z-[999999] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none pointer-events-auto",
+          "z-[999999] rounded-md border border-border/60 bg-popover p-4 text-popover-foreground shadow-md outline-none pointer-events-auto",
           "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",
           className
         )}