skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

Stop the Monday newsletter reminder overlapping the map toolbar

Browse source 
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.
This commit is contained in:
SkateSpots 2026-10-05 09:01:48 +07:00
parent 49111e9e12
commit 51ff603670
1 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/NewsletterOverlay.tsx
View file

@ -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" />