From 7a786478f10f5f03f2bac6cc60d504ea9fb81212 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 1 Feb 2025 14:57:43 +0100
Subject: [PATCH] ui: fix menu item flex layout (#281)

---
 apps/readest-app/src/components/MenuItem.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/readest-app/src/components/MenuItem.tsx b/apps/readest-app/src/components/MenuItem.tsx
index 65cb82ae..620539fe 100644
--- a/apps/readest-app/src/components/MenuItem.tsx
+++ b/apps/readest-app/src/components/MenuItem.tsx
@@ -33,19 +33,18 @@ const MenuItem: React.FC<MenuItemProps> = ({
       onClick={onClick}
       disabled={disabled}
     >
-      <div className='flex items-center'>
+      <div className='flex min-w-0 items-center'>
         {!noIcon && <span style={{ minWidth: `${iconSize}px` }}>{icon}</span>}
         <span
-          className={clsx(
-            'ml-2 truncate text-base sm:text-sm',
-            shortcut ? 'max-w-[60%]' : 'max-w-[90%]',
-            labelClass,
-          )}
+          className={clsx('mx-2 flex-1 truncate text-base sm:text-sm', labelClass)}
+          style={{ minWidth: 0 }}
         >
           {label}
         </span>
       </div>
-      {shortcut && <span className='text-neutral-content hidden text-sm sm:flex'>{shortcut}</span>}
+      {shortcut && (
+        <span className='text-neutral-content hidden shrink-0 text-sm sm:flex'>{shortcut}</span>
+      )}
     </button>
   );