mAi: #100 - paliadin trigger: lift above bottom-nav at <=767px (t-paliad-269)
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.
This commit is contained in:
@@ -15174,8 +15174,10 @@ dialog.quick-add-sheet::backdrop {
|
|||||||
* Floating trigger at bottom-right + slide-out drawer from the
|
* Floating trigger at bottom-right + slide-out drawer from the
|
||||||
* right edge. Hidden by default; revealed by paliadin-widget.ts
|
* right edge. Hidden by default; revealed by paliadin-widget.ts
|
||||||
* after /api/me confirms the caller is the Paliadin owner.
|
* after /api/me confirms the caller is the Paliadin owner.
|
||||||
* Mobile (≤640px): drawer goes full-screen; trigger sits above
|
* Mobile (≤640px): drawer goes full-screen.
|
||||||
* the bottom-nav slots.
|
* 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 {
|
.paliadin-widget-trigger {
|
||||||
@@ -15262,8 +15264,20 @@ dialog.quick-add-sheet::backdrop {
|
|||||||
.paliadin-widget-drawer {
|
.paliadin-widget-drawer {
|
||||||
width: 100vw;
|
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 {
|
.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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user