From 0679aabaa13b6e14b1da8c2c14306d1965776620 Mon Sep 17 00:00:00 2001
From: bot-hermes <bot-hermes@buzzbee.dev>
Date: Tue, 8 Sep 2026 18:18:19 +0000
Subject: [PATCH] fix: restore composer safe-area padding, slim bottom gradient
 overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous fix reduced composer bottom padding from the full safe-area
inset to --oc-safe-area-bottom-visual (max 12px), which was not enough
to clear the home indicator on modern iPhones — the input bar disappeared
under the screen.

Restore the full safe-area padding for correct clearance. Reduce the
visual 'chin' by slimming the home indicator gradient overlay from 12px
to max 8px (25% of safe area) with a simpler opaque-to-transparent fade.
Remove the separate dark/light fallback gradients (the CSS var already
adapts to theme).
---
 packages/ui/src/styles/mobile.css | 28 +++++++---------------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/packages/ui/src/styles/mobile.css b/packages/ui/src/styles/mobile.css
index d8b380c0..9a5eb3bd 100644
--- a/packages/ui/src/styles/mobile.css
+++ b/packages/ui/src/styles/mobile.css
@@ -389,7 +389,9 @@
 }
 
 @media (display-mode: standalone) {
-  /* Home indicator overlay */
+  /* Home indicator overlay — a slim gradient that blends the bottom edge
+     into the background. Height is kept small (max 8px) so the composer
+     padding above it does not create a thick visual "chin". */
   :root.device-mobile:not(.desktop-runtime) body::after,
   :root.device-tablet:not(.desktop-runtime) body::after,
   :root.mobile-pointer:not(.desktop-runtime) body::after {
@@ -398,13 +400,11 @@
     bottom: 0;
     left: 0;
     right: 0;
-    height: var(--oc-safe-area-bottom-visual, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0)));
+    height: clamp(4px, calc(var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0)) * 0.25), 8px);
     background: linear-gradient(
       to top,
       var(--background) 0%,
-      var(--background) 30%,
-      rgba(from var(--background) r g b / 0.8) 60%,
-      rgba(from var(--background) r g b / 0.3) 85%,
+      var(--background) 40%,
       transparent 100%
     );
     z-index: 1000;
@@ -419,21 +419,7 @@
       background: linear-gradient(
         to top,
         var(--background) 0%,
-        var(--background) 30%,
-        rgba(21, 19, 19, 0.8) 60%,  /* Dark theme fallback */
-        rgba(21, 19, 19, 0.3) 85%,
-        transparent 100%
-      );
-    }
-
-    /* Light theme fallback */
-    :root body::after {
-      background: linear-gradient(
-        to top,
-        var(--background) 0%,
-        var(--background) 30%,
-        rgba(248, 247, 243, 0.8) 60%,  /* Light theme fallback */
-        rgba(248, 247, 243, 0.3) 85%,
+        var(--background) 40%,
         transparent 100%
       );
     }
@@ -716,7 +702,7 @@
   }
 
   :root:not(.oc-capacitor-app):not(.oc-browser-keyboard-open) .oc-mobile-composer {
-    padding-bottom: calc(0.75rem + var(--oc-safe-area-bottom-visual, 0px)) !important;
+    padding-bottom: calc(0.75rem + max(16px, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0px)))) !important;
   }
 
   /* Fullscreen composer: ChatInput pins the form to the visual viewport from