From d18c2f2a5b5cbd8b5a632cbe5a1e3186e188ccdd Mon Sep 17 00:00:00 2001
From: Cyrus Gray <144336577+graycyrus@users.noreply.github.com>
Date: Thu, 25 Jun 2026 17:14:20 +0530
Subject: [PATCH] fix(sidebar): enlarge collapsed-rail icons and add breathing
 room (#4110)

---
 app/src/components/layout/shell/CollapsedNavRail.tsx | 10 +++++-----
 app/src/components/layout/shell/RootShellLayout.tsx  |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/src/components/layout/shell/CollapsedNavRail.tsx b/app/src/components/layout/shell/CollapsedNavRail.tsx
index 2282d0439..4caa8dd22 100644
--- a/app/src/components/layout/shell/CollapsedNavRail.tsx
+++ b/app/src/components/layout/shell/CollapsedNavRail.tsx
@@ -58,7 +58,7 @@ export default function CollapsedNavRail() {
     !matchActive('/settings/wallet-balances', location.pathname);
 
   return (
-    <nav className="flex flex-col items-center gap-0.5" aria-label={t('nav.home')}>
+    <nav className="flex flex-col items-center gap-2" aria-label={t('nav.home')}>
       {/* Home */}
       <Tooltip label={t('nav.home')}>
         <button
@@ -71,7 +71,7 @@ export default function CollapsedNavRail() {
               ? 'bg-white text-stone-900 shadow-sm dark:bg-neutral-800 dark:text-neutral-100'
               : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
           }`}>
-          <NavIcon id="home" className="h-4 w-4" />
+          <NavIcon id="home" className="h-5 w-5" />
         </button>
       </Tooltip>
 
@@ -90,7 +90,7 @@ export default function CollapsedNavRail() {
               ? 'bg-white text-stone-900 shadow-sm dark:bg-neutral-800 dark:text-neutral-100'
               : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
           }`}>
-          <NavIcon id="wallet" className="h-4 w-4" />
+          <NavIcon id="wallet" className="h-5 w-5" />
         </button>
       </Tooltip>
 
@@ -111,7 +111,7 @@ export default function CollapsedNavRail() {
                   ? 'bg-white text-stone-900 shadow-sm dark:bg-neutral-800 dark:text-neutral-100'
                   : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
               }`}>
-              <NavIcon id={tab.id} className="h-4 w-4" />
+              <NavIcon id={tab.id} className="h-5 w-5" />
               {showBadge && (
                 <span className="absolute -right-0.5 -top-0.5 flex h-[13px] min-w-[13px] items-center justify-center rounded-full bg-coral-500 px-1 text-[9px] font-bold leading-none text-white">
                   {unreadCount > 9 ? '9+' : unreadCount}
@@ -136,7 +136,7 @@ export default function CollapsedNavRail() {
             ? 'bg-white text-stone-900 shadow-sm dark:bg-neutral-800 dark:text-neutral-100'
             : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
         }`}>
-        <NavIcon id="settings" className="h-4 w-4" />
+        <NavIcon id="settings" className="h-5 w-5" />
       </button>
     </nav>
   );
diff --git a/app/src/components/layout/shell/RootShellLayout.tsx b/app/src/components/layout/shell/RootShellLayout.tsx
index 7738f2cd5..87bb3996c 100644
--- a/app/src/components/layout/shell/RootShellLayout.tsx
+++ b/app/src/components/layout/shell/RootShellLayout.tsx
@@ -178,7 +178,7 @@ export default function RootShellLayout({ sidebar, children }: RootShellLayoutPr
           native CEF webview glued to the content's bounds, which composites
           above the HTML layer — starts to its right and never covers it. */}
       {!isOpen && (
-        <div className="flex w-9 flex-none flex-col items-center gap-0.5 border-r border-stone-200 bg-white pt-2 dark:border-neutral-800 dark:bg-neutral-900">
+        <div className="flex w-14 flex-none flex-col items-center gap-0.5 border-r border-stone-200 bg-white pt-2 dark:border-neutral-800 dark:bg-neutral-900">
           <Tooltip label={t('layout.showSidebar')}>
             <button
               type="button"