From 51ff603670fdab38dbc9fce1b755aed81d611bcc Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Mon, 5 Oct 2026 09:01:48 +0700
Subject: [PATCH] Stop the Monday newsletter reminder overlapping the map
 toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The admin "It's Monday — write the drop" card was pinned at top-20 on every
route, so on the map it sat on top of the top-right toolbar (Add Spot / Weather
/ More). It now drops below that toolbar on the map routes (top-40) while other
pages keep top-20, and the dismiss button is a proper compact target.
---
 src/components/NewsletterOverlay.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/NewsletterOverlay.tsx b/src/components/NewsletterOverlay.tsx
index ae631a7..cc56cdb 100644
--- a/src/components/NewsletterOverlay.tsx
+++ b/src/components/NewsletterOverlay.tsx
@@ -6,6 +6,7 @@ import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { NEWSLETTER_ISSUES } from '@/lib/newsletterIssues';
 import { useTranslation } from '@/contexts/language';
 import { isAdminPubkey } from '@/lib/admins';
+import { cn } from '@/lib/utils';
 
 /**
  * How many days the "Latest Drop" pill stays visible after a new issue.
@@ -104,6 +105,7 @@ 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 ||
@@ -116,7 +118,12 @@ function MondayAdminReminder() {
   }
 
   return (
-    <div className="fixed top-20 md:top-20 right-4 z-50 max-w-xs animate-in slide-in-from-right-4 duration-300">
+    <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',
+    )}>
       <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">
           <div className="w-8 h-8 rounded-xl bg-[#ccff00]/15 flex items-center justify-center flex-shrink-0">
@@ -142,7 +149,7 @@ function MondayAdminReminder() {
           </div>
           <button
             onClick={() => setDismissed(todayKey)}
-            className="flex-shrink-0 text-gray-600 hover:text-gray-400 transition-colors"
+            className="min-h-0 min-w-0 flex-shrink-0 text-gray-600 hover:text-gray-400 transition-colors"
             aria-label={t('walletUi.newsletter.dismissReminder')}
           >
             <X className="h-4 w-4" />