From f2bfbf42742611be3db9c6ebfe2025233ecef267 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Mon, 5 Oct 2026 20:48:02 +0700
Subject: [PATCH] fix(newsletter): Monday reminder banner on mobile (bottom,
 above nav) not clipped by the map toolbar

---
 src/components/NewsletterOverlay.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/NewsletterOverlay.tsx b/src/components/NewsletterOverlay.tsx
index cc56cdb..e0db03f 100644
--- a/src/components/NewsletterOverlay.tsx
+++ b/src/components/NewsletterOverlay.tsx
@@ -105,7 +105,6 @@ function MondayAdminReminder() {
   const todayKey = new Date().toISOString().slice(0, 10);
   const isAdmin = isAdminPubkey(user?.pubkey);
   const alreadyDismissedToday = dismissed === todayKey;
-  const isMapPage = location.pathname === '/' || location.pathname === '/map';
 
   if (
     !isAdmin ||
@@ -119,10 +118,12 @@ function MondayAdminReminder() {
 
   return (
     <div className={cn(
-      'fixed right-4 z-50 max-w-[calc(100vw-2rem)] w-80 animate-in slide-in-from-right-4 duration-300',
-      // On the map the right-hand toolbar (Add Spot / Weather / More) sits at the
-      // top, so drop the card below it; elsewhere top-20 clears the header.
-      isMapPage ? 'top-40' : 'top-20',
+      'fixed z-[1200] w-auto max-w-none animate-in slide-in-from-bottom-4 duration-300',
+      // Mobile: a bottom banner above the nav — never collides with the map
+      // toolbar / search bar (which sits at the top of the map).
+      'inset-x-3 bottom-[calc(4.75rem+env(safe-area-inset-bottom,0px))]',
+      // Desktop: the top-right card.
+      'md:inset-x-auto md:bottom-auto md:top-20 md:right-4 md:w-80',
     )}>
       <div className="bg-black/98 border-2 border-[#ccff00]/60 rounded-2xl shadow-2xl shadow-[#ccff00]/10 p-4">
         <div className="flex items-start gap-3">