From 013facb9dbdd6ac9c5a1de7392253767d94e0be5 Mon Sep 17 00:00:00 2001
From: mAi <mai@flexsiebels.de>
Date: Mon, 25 May 2026 15:58:38 +0200
Subject: [PATCH] mAi: #100 - paliadin trigger: lift above bottom-nav at
 <=767px (t-paliad-269)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Paliadin floating-button trigger was overlapping the PWA bottom-nav
on mobile because its lift rule was scoped to @media (max-width: 640px)
while .bottom-nav itself appears at @media (max-width: 767px). Phones in
landscape and small tablets between those breakpoints saw the desktop
bottom: 20px and got covered by the navbar.

Two changes:
- Widen the trigger lift breakpoint to 767px (matches .bottom-nav).
- Replace hardcoded 72px with calc(var(--bottom-nav-height) + 16px +
  env(safe-area-inset-bottom, 0px)) so the math tracks the navbar
  height variable already used elsewhere (e.g. dashboard-save-toast).

The drawer's full-screen rule (.paliadin-widget-drawer width: 100vw)
stays at <=640px — only the trigger lift moves.

Desktop layout (bottom: 20px) unchanged; widget open/close animation
unchanged.
---
 frontend/src/styles/global.css | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index d68e4fa..0ad56e7 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -15174,8 +15174,10 @@ dialog.quick-add-sheet::backdrop {
  * Floating trigger at bottom-right + slide-out drawer from the
  * right edge. Hidden by default; revealed by paliadin-widget.ts
  * after /api/me confirms the caller is the Paliadin owner.
- * Mobile (≤640px): drawer goes full-screen; trigger sits above
- * the bottom-nav slots.
+ * Mobile (≤640px): drawer goes full-screen.
+ * Phone breakpoint (≤767px, matches .bottom-nav): trigger lifts
+ * above the bottom-nav slots so it doesn't collide with the
+ * navbar on PWA standalone (t-paliad-269).
  */
 
 .paliadin-widget-trigger {
@@ -15262,8 +15264,20 @@ dialog.quick-add-sheet::backdrop {
     .paliadin-widget-drawer {
         width: 100vw;
     }
+}
+
+/* Lift the trigger above the BottomNav at the same breakpoint where
+   the nav appears (<768px in global.css ".bottom-nav"). The navbar is
+   --bottom-nav-height tall plus the iOS safe-area inset; 16px gap
+   keeps the bubble clear without crowding the nav slots. Bubble sits
+   at the right edge so the center FAB-circle (margin-top: -10px) is
+   not in its column.
+   t-paliad-269: previously this rule was scoped to <=640px, but the
+   .bottom-nav shows at <=767px, leaving phones in landscape and small
+   tablets with an overlapping bubble. */
+@media (max-width: 767px) {
     .paliadin-widget-trigger {
-        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
+        bottom: calc(var(--bottom-nav-height, 56px) + 16px + env(safe-area-inset-bottom, 0px));
     }
 }