From df420e37d9d5b3d9c341521e888d0408dfcbde49 Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Wed, 10 Sep 2025 13:37:02 +0800
Subject: [PATCH] fix(sidebar): eliminate nav link icon jumping and text
 squashing

- Unified layout structure using consistent pl-3 pr-1 padding
- Icon micro-adjustment with -ml-1 for better centering in collapsed state
- Text animation uses max-width instead of width to prevent squashing effect
- Maintains smooth transitions without layout jumping
---
 web/app/components/app-sidebar/navLink.tsx | 38 +++++++++++-----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/web/app/components/app-sidebar/navLink.tsx b/web/app/components/app-sidebar/navLink.tsx
index 37b965ea3a..e7b637a64d 100644
--- a/web/app/components/app-sidebar/navLink.tsx
+++ b/web/app/components/app-sidebar/navLink.tsx
@@ -49,19 +49,24 @@ const NavLink = ({
         disabled
         className={classNames(
           'system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
-          mode === 'expand' ? 'pl-3 pr-1' : 'px-1.5',
+          'pl-3 pr-1',
         )}
         title={mode === 'collapse' ? name : ''}
         aria-disabled
       >
-        <NavIcon
+        <div className={classNames(mode !== 'expand' && '-ml-1')}>
+          <NavIcon className="h-4 w-4 shrink-0" aria-hidden="true" />
+        </div>
+        <span
           className={classNames(
-            'h-4 w-4 shrink-0',
-            mode === 'expand' ? 'mr-2' : 'mr-0',
+            'overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
+            mode === 'expand'
+              ? 'ml-2 max-w-none opacity-100'
+              : 'ml-0 max-w-0 opacity-0',
           )}
-          aria-hidden='true'
-        />
-        {mode === 'expand' && name}
+        >
+          {name}
+        </span>
       </button>
     )
   }
@@ -74,24 +79,19 @@ const NavLink = ({
         isActive
           ? 'system-sm-semibold border-b-[0.25px] border-l-[0.75px] border-r-[0.25px] border-t-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active text-text-accent-light-mode-only'
           : 'system-sm-medium text-components-menu-item-text hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover',
-        'flex h-8 items-center rounded-lg',
-        mode === 'expand' ? 'pl-3 pr-1' : 'px-1.5',
+        'flex h-8 items-center rounded-lg pl-3 pr-1',
       )}
       title={mode === 'collapse' ? name : ''}
     >
-      <NavIcon
-        className={classNames(
-          'h-4 w-4 shrink-0',
-          mode === 'expand' ? 'mr-2' : 'mr-0',
-        )}
-        aria-hidden='true'
-      />
+      <div className={classNames(mode !== 'expand' && '-ml-1')}>
+        <NavIcon className="h-4 w-4 shrink-0" aria-hidden="true" />
+      </div>
       <span
         className={classNames(
-          'whitespace-nowrap transition-all duration-200 ease-in-out',
+          'overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
           mode === 'expand'
-            ? 'w-auto opacity-100'
-            : 'pointer-events-none w-0 overflow-hidden opacity-0',
+            ? 'ml-2 max-w-none opacity-100'
+            : 'ml-0 max-w-0 opacity-0',
         )}
       >
         {name}