BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore composer safe-area padding, slim bottom gradient overlay

Browse Source 
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).
This commit is contained in:
bot-hermes
2026-09-08 18:18:19 +00:00
parent bbe91d4cd8
commit 0679aabaa1
1 changed files with 7 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/styles/mobile.css
+7 -21
View File
@@ -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