From 07a72d6c9f70ffc61eae6d0f6f65aa81cfe7e5ff Mon Sep 17 00:00:00 2001
From: Jeet Debnath <jeet.debnath2004@gmail.com>
Date: Tue, 14 Apr 2026 14:53:58 +0530
Subject: [PATCH] navbar update

---
 src/App.css | 42 ++++++++++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/App.css b/src/App.css
index c43a6f4..8992d2a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -426,7 +426,7 @@
     -ms-overflow-style: none; /* IE/Edge */
     display: flex;
     flex-direction: column;
-    padding: 1.5rem 1.25rem 1rem;
+    padding: 1.5rem 1.25rem calc(88px + env(safe-area-inset-bottom));
 }
 
 .journal-container::-webkit-scrollbar {
@@ -822,16 +822,21 @@
    BOTTOM NAVIGATION — Static flex item, always at bottom
    ============================ */
 .bottom-nav {
-    flex-shrink: 0;
-    position: relative; /* NOT fixed — lives in the flex column */
-    background: var(--color-surface);
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
-    padding: 8px 12px 12px;
+    position: fixed;
+    bottom: calc(16px + env(safe-area-inset-bottom));
+    left: 50%;
+    transform: translateX(-50%);
+    background: #fff;
+    border-radius: 100px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13), 0 1px 4px rgba(0, 0, 0, 0.07);
+    padding: 6px;
     display: flex;
     align-items: center;
-    justify-content: space-around;
-    gap: 4px;
-    z-index: 10;
+    gap: 2px;
+    z-index: 100;
+    /* prevent layout from reserving space for it */
+    flex-shrink: 0;
+    width: max-content;
 }
 
 .bottom-nav-btn {
@@ -840,7 +845,7 @@
     align-items: center;
     justify-content: center;
     gap: 5px;
-    padding: 8px 14px;
+    padding: 10px 18px;
     background: transparent;
     border: none;
     border-radius: 100px;
@@ -896,11 +901,12 @@
 .bottom-nav-btn-active {
     background: #22c55e;
     color: #fff;
-    padding: 9px 18px;
+    padding: 10px 18px;
 }
 
+.bottom-nav-btn span,
 .bottom-nav-btn-active span {
-    display: inline;
+    display: none;
 }
 .bottom-nav-btn-active:hover {
     background: #16a34a;
@@ -966,7 +972,7 @@
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    padding: 1rem 1.25rem 0.5rem;
+    padding: 1rem 1.25rem calc(88px + env(safe-area-inset-bottom));
 }
 .history-container::-webkit-scrollbar {
     display: none;
@@ -1222,7 +1228,7 @@
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    padding: 1rem 1.25rem 0.5rem;
+    padding: 1rem 1.25rem calc(88px + env(safe-area-inset-bottom));
 }
 .settings-container::-webkit-scrollbar {
     display: none;
@@ -2125,8 +2131,12 @@
         position: fixed;
         left: 0;
         top: 0;
+        bottom: auto;
+        transform: none;
         height: 100dvh;
         width: 232px;
+        border-radius: 0;
+        box-shadow: none;
         flex-direction: column;
         justify-content: flex-start;
         align-items: stretch;
@@ -2408,8 +2418,8 @@
 
 /* -- Bottom nav -- */
 [data-theme="dark"] .bottom-nav {
-    background: var(--color-surface);
-    border-top-color: rgba(74, 222, 128, 0.1);
+    background: #1e2320;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
 }
 
 [data-theme="dark"] .bottom-nav-btn {