From 455973b394ca49b04e05c84a4c2017a7c047ad1c Mon Sep 17 00:00:00 2001
From: simiondolha <34995943+simiondolha@users.noreply.github.com>
Date: Tue, 13 Jan 2026 18:53:11 +0100
Subject: [PATCH] fix(ui): improve Variables Dropdown styling consistency
 (#26675)

* fix(ui): improve Variables Dropdown styling consistency

- Change focus ring from brand-800 to subtle for consistent design
- Add rounded-md to dropdown container for visual consistency
- Add rounded-md to DropdownMenuItem for rounded corners
- Remove redundant hover:bg-muted and conditional bg-muted styling

Fixes #25848

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: restore keyboard navigation active state indicator

Keep the conditional bg-muted styling for the selected item during
keyboard navigation, while still removing the redundant hover:bg-muted
since DropdownMenuItem already handles hover styling.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: simiondolha <simiondolha@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
---
 .../ui/components/editor/plugins/AddVariablesDropdown.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index ea88dd00e3..d0aa33fc26 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
@@ -142,20 +142,20 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
               onChange={(e) => setQuery(e.target.value)}
               placeholder={t("search_variables")}
               aria-label={t("search_variables")}
-              className="border-subtle bg-default focus:ring-brand-800 w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-1"
+              className="border-subtle bg-default focus:ring-subtle w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-1"
             />
           </div>
-          <div className="max-h-64 overflow-y-auto overflow-x-hidden md:max-h-80" ref={dropdownContainerRef}>
+          <div className="max-h-64 overflow-y-auto overflow-x-hidden rounded-md md:max-h-80" ref={dropdownContainerRef}>
             {filteredVariables.length === 0 ? (
               <div className="text-subtle px-4 py-2 text-center text-sm">{t("no_variables_found")}</div>
             ) : (
               filteredVariables.map((variable, index) => (
-                <DropdownMenuItem key={variable} className="w-full p-1 hover:ring-0 focus:outline-none">
+                <DropdownMenuItem key={variable} className="w-full rounded-md p-1 hover:ring-0 focus:outline-none">
                   <button
                     ref={(el) => (itemRefs.current[index] = el)}
                     key={variable}
                     type="button"
-                    className={`hover:bg-muted w-full rounded-md px-3 py-2 text-left transition-colors focus:outline-none ${
+                    className={`w-full rounded-md px-3 py-2 text-left transition-colors focus:outline-none ${
                       selectedIndex === index ? "bg-muted" : ""
                     }`}
                     onMouseEnter={() => setSelectedIndex(index)}