From 3cdcf37c00c2990110ab884dde2e7a074b08dcd8 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Sun, 24 May 2026 04:08:07 -0600
Subject: [PATCH] Fix in-app reminder banner clipping behind bottom nav.

Position the banner above the nav using --bottom-nav-height instead of bottom-16.
---
 components/reminders/in-app-reminder-banner.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/reminders/in-app-reminder-banner.tsx b/components/reminders/in-app-reminder-banner.tsx
index 93b27b8..08cbbfa 100644
--- a/components/reminders/in-app-reminder-banner.tsx
+++ b/components/reminders/in-app-reminder-banner.tsx
@@ -35,7 +35,8 @@ export function InAppReminderBanner() {
     <div
       role="status"
       aria-live="polite"
-      className="fixed inset-x-0 bottom-16 z-50 px-4"
+      className="fixed inset-x-0 z-[60] px-4 pb-[env(safe-area-inset-bottom,0px)]"
+      style={{ bottom: "calc(var(--bottom-nav-height) + 0.5rem)" }}
     >
       <div className="mx-auto flex max-w-lg items-start gap-3 rounded-xl border border-primary/30 bg-card p-4 shadow-lg">
         <div className="rounded-full bg-primary/10 p-2">