From 1af8e395ac0c786ce2c3cc714041106d8f1b8d21 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 22 Jun 2026 15:57:23 +0330
Subject: [PATCH] fix(ui): home bottom nav matches inner screens

Wrap the home-screen NavRail in the same centered max-w-md container + notch-
safe bottom padding that ScreenShell uses, so the pill is identical in width and
position across home and every other screen. Home still drops its redundant Home
tab (5 vs 6) by design.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/HomeScreen.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/HomeScreen.tsx b/src/components/HomeScreen.tsx
index 42a3c68..6ab3b46 100644
--- a/src/components/HomeScreen.tsx
+++ b/src/components/HomeScreen.tsx
@@ -173,8 +173,14 @@ export function HomeScreen() {
           </div>
         </div>
 
-        {/* bottom nav */}
-        <NavRail bottom />
+        {/* bottom nav — same wrapper as the inner-screen ScreenShell rail
+            (centered max-w-md pill + notch-safe bottom padding) so it looks
+            identical across home and every other screen. */}
+        <div className="shrink-0 px-3 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
+          <div className="mx-auto w-full max-w-md">
+            <NavRail bottom />
+          </div>
+        </div>
       </div>
     </main>
   );