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)); } }