From 1af34a18dcfc5a339ec78daa4f0eed5461d10ed2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Berardo=20Mate=CC=80?= <berardo@commercelayer.io>
Date: Fri, 10 Apr 2026 13:48:17 +0200
Subject: [PATCH] fix: dropdown font & padding

---
 .../src/ui/composite/Dropdown/DropdownItem.tsx     |  6 +++---
 .../src/ui/composite/Dropdown/DropdownMenu.tsx     |  2 +-
 .../Dropdown/__snapshots__/Dropdown.test.tsx.snap  | 14 +++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
index 5c38818a..f81559e9 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
@@ -61,10 +61,10 @@ export const DropdownItem = withSkeletonTemplate<DropdownItemProps>(
         }}
         href={href}
         className={cn(
-          "w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden!",
+          "w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-2.5 mx-2 text-sm font-medium flex items-center focus:outline-hidden!",
           {
             "pr-8": info == null,
-            "min-w-[250px] pr-6": info != null,
+            "min-w-64 pr-6": info != null,
           },
           className,
           {
@@ -93,7 +93,7 @@ export const DropdownItem = withSkeletonTemplate<DropdownItemProps>(
           {label}
         </span>
         {info != null && (
-          <span className="ml-auto pl-1 text-xs text-gray-500 font-semibold group-hover:text-white">
+          <span className="ml-auto pl-1 text-xs text-gray-500 font-semibold group-hover:text-gray-600">
             {info}
           </span>
         )}
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
index b496b6fa..109a4a7c 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
@@ -51,7 +51,7 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
         className={cn(
           "bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg",
           {
-            "min-w-[150px] md:max-w-[250px]": menuWidth == null, // default width
+            "min-w-40 md:max-w-80": menuWidth == null, // default width
             "w-70": menuWidth === "wide",
           },
         )}
diff --git a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 92acb7f5..33913f61 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`Dropdown > Should be rendering bottom-left 1`] = `
         class="flex flex-col items-start"
       >
         <div
-          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-40 md:max-w-80"
         >
           <div />
         </div>
@@ -72,7 +72,7 @@ exports[`Dropdown > Should be rendering top-left 1`] = `
         class="flex flex-col-reverse items-start"
       >
         <div
-          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-40 md:max-w-80"
         >
           <div />
         </div>
@@ -113,7 +113,7 @@ exports[`Dropdown > Should be rendering top-right 1`] = `
         class="flex flex-col-reverse items-end"
       >
         <div
-          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-40 md:max-w-80"
         >
           <div />
         </div>
@@ -154,11 +154,11 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
         class="flex flex-col items-end"
       >
         <div
-          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-40 md:max-w-80"
         >
           <button
             aria-label="Payments"
-            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-2.5 mx-2 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -184,7 +184,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
           </button>
           <button
             aria-label="Items"
-            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-2.5 mx-2 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -209,7 +209,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
           </div>
           <button
             aria-label="Delete"
-            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-2.5 mx-2 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"