UI6 修复 iPhone11 企业微信移动导航

client/src/components/mobile/MobileBottomNav.tsx

@@ -34,10 +34,10 @@ export function MobileBottomNav() {
 
   return (
     <nav
-      className="fixed inset-x-0 bottom-0 z-50 border-t border-zinc-200 bg-white/95 px-2 pb-[max(0.35rem,env(safe-area-inset-bottom))] pt-1.5 shadow-[0_-6px_18px_rgba(15,23,42,0.08)] backdrop-blur md:hidden"
+      className="pointer-events-auto fixed inset-x-0 bottom-0 z-[70] min-h-[calc(var(--mobile-bottom-nav-height,64px)+env(safe-area-inset-bottom,0px))] transform-gpu border-t border-zinc-200 bg-white/95 px-2 pb-[calc(0.35rem+env(safe-area-inset-bottom,0px))] pt-1.5 shadow-[0_-6px_18px_rgba(15,23,42,0.08)] backdrop-blur md:hidden"
       data-testid="mobile-bottom-nav"
     >
-      <div className="grid grid-cols-4 gap-1">
+      <div className="relative z-[71] grid grid-cols-4 gap-1">
         {MOBILE_NAV_ITEMS.map((item) => {
           const disabled = item.anyOf ? !hasAnyPermission(permissions, [...item.anyOf]) : false;
           const badge = item.key === "approvals" && pendingCount > 0 ? resolveBadgeLabel(pendingCount) : null;
@@ -48,13 +48,13 @@ export function MobileBottomNav() {
                 key={item.key}
                 type="button"
                 data-testid={`mobile-nav-${item.key}`}
-                className="touch-target flex h-12 min-h-0 flex-col items-center justify-center gap-0.5 rounded-xl px-0.5 py-1 text-[11px] font-medium leading-none text-zinc-400"
+                className="touch-target flex h-12 min-h-0 min-w-0 select-none flex-col items-center justify-center gap-0.5 rounded-xl px-0.5 py-1 text-[11px] font-medium leading-none text-zinc-400"
                 disabled
                 aria-disabled="true"
                 title={`${item.label}不可用`}
               >
                 <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
-                <span className="whitespace-nowrap">{item.label}</span>
+                <span className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap">{item.label}</span>
               </button>
             );
           }
@@ -67,7 +67,7 @@ export function MobileBottomNav() {
               data-testid={`mobile-nav-${item.key}`}
               className={({ isActive }) =>
                 cn(
-                  "touch-target flex h-12 min-h-0 flex-col items-center justify-center gap-0.5 rounded-xl px-0.5 py-1 text-[11px] font-medium leading-none transition-colors",
+                  "touch-target pointer-events-auto flex h-12 min-h-0 min-w-0 select-none flex-col items-center justify-center gap-0.5 rounded-xl px-0.5 py-1 text-[11px] font-medium leading-none transition-colors",
                   isActive
                     ? "bg-primary text-white shadow-sm"
                     : "text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900",
@@ -89,7 +89,7 @@ export function MobileBottomNav() {
                       </span>
                     ) : null}
                   </span>
-                  <span className="whitespace-nowrap">{item.label}</span>
+                  <span className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap">{item.label}</span>
                 </>
               )}
             </NavLink>