From 87ecf84e63a0f6ea04abfe43746e654f5758e6bb Mon Sep 17 00:00:00 2001
From: Shahanur Islam Shagor <smshagor.ru@gmail.com>
Date: Wed, 19 Aug 2026 11:30:06 +0300
Subject: [PATCH 1/2] Fix mobile footer dock layout

---
 .../client/components/chat/foreground/mobileNav.jsx  | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/client/components/chat/foreground/mobileNav.jsx b/frontend/client/components/chat/foreground/mobileNav.jsx
index eb88d32d..66567023 100644
--- a/frontend/client/components/chat/foreground/mobileNav.jsx
+++ b/frontend/client/components/chat/foreground/mobileNav.jsx
@@ -91,13 +91,17 @@ function MobileNav() {
   ];
 
   return (
-    <nav className="fixed inset-x-0 bottom-0 z-[110] bg-white/95 px-3 pb-[calc(0.55rem+env(safe-area-inset-bottom))] pt-2 backdrop-blur-xl md:hidden dark:bg-spill-900/95">
-      <div className="grid grid-cols-5 gap-1.5 rounded-2xl border border-slate-200/80 bg-white/95 p-1.5 shadow-[0_14px_36px_-16px_rgba(15,23,42,0.45)] backdrop-blur-xl dark:border-spill-700/80 dark:bg-spill-900/95 dark:shadow-[0_14px_36px_-16px_rgba(2,6,23,0.7)]">
+    <nav
+      data-syncchat-mobile-nav
+      aria-label="Primary mobile navigation"
+      className="pointer-events-none fixed inset-x-0 bottom-[max(0.5rem,env(safe-area-inset-bottom))] z-[110] px-3 md:hidden"
+    >
+      <div className="pointer-events-auto grid grid-cols-5 gap-1.5 rounded-[26px] border border-slate-200/80 bg-white/95 p-1.5 shadow-[0_18px_44px_-14px_rgba(15,23,42,0.48)] backdrop-blur-xl dark:border-spill-700/80 dark:bg-spill-900/95 dark:shadow-[0_18px_44px_-14px_rgba(2,6,23,0.78)]">
         {items.map((item) => (
           <button
             key={item.key}
             type="button"
-            className={`group relative flex flex-col items-center justify-center gap-1 rounded-xl px-1 py-2 text-[11px] font-semibold transition ${
+            className={`group relative flex min-w-0 flex-col items-center justify-center gap-1 rounded-[18px] px-1 py-2 text-[11px] font-semibold transition ${
               item.active
                 ? 'bg-gradient-to-b from-sky-500/20 to-sky-600/10 text-sky-700 dark:from-sky-500/25 dark:to-sky-500/10 dark:text-sky-300'
                 : 'text-slate-500 hover:bg-slate-100 dark:text-spill-300 dark:hover:bg-spill-800/80'
@@ -113,7 +117,7 @@ function MobileNav() {
             >
               <item.icon size={16} />
             </span>
-            <span>{item.label}</span>
+            <span className="max-w-full truncate">{item.label}</span>
             {item.active && (
               <span className="absolute -top-1 h-1.5 w-8 rounded-full bg-sky-500/90 dark:bg-sky-400/90" />
             )}

From 8b046dd2b83cd7d2ffc9c000f14c01ef77ce1775 Mon Sep 17 00:00:00 2001
From: Shahanur Islam Shagor <smshagor.ru@gmail.com>
Date: Wed, 19 Aug 2026 11:30:26 +0300
Subject: [PATCH 2/2] Reserve mobile footer safe area

---
 frontend/client/styles/chatToolsTheme.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/client/styles/chatToolsTheme.css b/frontend/client/styles/chatToolsTheme.css
index 7410ab4b..5c1d0129 100644
--- a/frontend/client/styles/chatToolsTheme.css
+++ b/frontend/client/styles/chatToolsTheme.css
@@ -71,6 +71,27 @@ button[title^='Chat tools']:focus-visible {
   outline-color: #38bdf8;
 }
 
+/*
+ * Mobile dock clearance.
+ *
+ * Pages that already opt into `pb-16 md:pb-0` are foreground/mobile panels.
+ * The floating dock is taller than 4rem, so reserve enough scroll room for the
+ * final row (for example Settings -> Log out) to move fully above the dock.
+ */
+@media (max-width: 767px) {
+  .pb-16.md\:pb-0 {
+    padding-bottom: calc(7.25rem + env(safe-area-inset-bottom)) !important;
+  }
+
+  /* Chat Tools belongs on the lower-left on phones. Keep it above the dock so
+   * it cannot cover Calls or the existing new-message action on the right. */
+  button[title^='Chat tools'] {
+    right: auto !important;
+    left: max(1rem, env(safe-area-inset-left));
+    bottom: calc(6.35rem + env(safe-area-inset-bottom));
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   button[title^='Chat tools'] {
     transition: none;