From f8ccbce964cbd736c7a62ed39ff993d67eb5cff0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicole=20Miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Wed, 9 Apr 2025 15:23:18 +0200
Subject: [PATCH] pl-fe: sort of improve dropdown menu styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>
---
 .../pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx | 2 +-
 packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
index 8e0390a8d..d9375effd 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -120,7 +120,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
       >
         {item.icon && <Icon src={item.icon} className='mr-3 size-5 flex-none rtl:ml-3 rtl:mr-0' />}
 
-        <div className={clsx('text-xs', { 'mr-2': item.count || item.type === 'toggle' || item.items?.length })}>
+        <div className={clsx('overflow-hidden text-xs', { 'mr-2': item.count || item.type === 'toggle' || item.items?.length })}>
           <div className='truncate text-base'>{item.text}</div>
           <div className='mt-0.5'>{item.meta}</div>
         </div>
diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
index 3b21ea994..ac42c2ed6 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
@@ -125,7 +125,7 @@ const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({ handleClose, item
   };
 
   const renderItems = (items: Menu | undefined) => (
-    <ul>
+    <ul className='overflow-hidden'>
       {items?.map((item, idx) => (
         <DropdownMenuItem
           key={idx}
@@ -147,7 +147,7 @@ const DropdownMenuContent: React.FC<IDropdownMenuContent> = ({ handleClose, item
             {Component && <Component handleClose={handleClose} />}
             {(items?.length || touchscreen) && renderItems(items)}
           </div>
-          <div className={clsx({ 'w-full': touchscreen, 'fit-content': !touchscreen })}>
+          <div className={clsx({ 'w-full': touchscreen, 'fit-content mr-auto': !touchscreen })}>
             {tab !== undefined && (
               <>
                 <HStack className='mx-2 my-1 text-gray-700 dark:text-gray-300' space={3} alignItems='center'>