From 0c767317ab91cb16d0173e40fc49dbc744362871 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Tue, 24 Feb 2026 03:37:13 +0800
Subject: [PATCH] Fix snooze dropdown clipping in toasts, add Dismiss label to
 banner

- SnoozeDropdown: added direction prop (up/down), toasts use 'down'
  so dropdown opens below the button instead of clipping off-screen
- AlertBanner dismiss button now shows X icon + 'Dismiss' text to
  match toast style

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/dashboard/AlertBanner.tsx    | 3 ++-
 frontend/src/components/reminders/SnoozeDropdown.tsx | 7 +++++--
 frontend/src/hooks/useAlerts.tsx                     | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/AlertBanner.tsx b/frontend/src/components/dashboard/AlertBanner.tsx
index a511259..40365bc 100644
--- a/frontend/src/components/dashboard/AlertBanner.tsx
+++ b/frontend/src/components/dashboard/AlertBanner.tsx
@@ -38,9 +38,10 @@ export default function AlertBanner({ alerts, onDismiss, onSnooze }: AlertBanner
             <button
               onClick={() => onDismiss(alert.id)}
               aria-label={`Dismiss "${alert.title}"`}
-              className="p-1 rounded hover:bg-accent/10 hover:text-accent text-muted-foreground transition-colors shrink-0"
+              className="flex items-center gap-1 px-1.5 py-1 rounded hover:bg-accent/10 hover:text-accent text-muted-foreground transition-colors shrink-0"
             >
               <X className="h-3.5 w-3.5" />
+              <span className="text-[11px] font-medium">Dismiss</span>
             </button>
           </div>
         ))}
diff --git a/frontend/src/components/reminders/SnoozeDropdown.tsx b/frontend/src/components/reminders/SnoozeDropdown.tsx
index abe470d..00036a9 100644
--- a/frontend/src/components/reminders/SnoozeDropdown.tsx
+++ b/frontend/src/components/reminders/SnoozeDropdown.tsx
@@ -4,6 +4,7 @@ import { Clock } from 'lucide-react';
 interface SnoozeDropdownProps {
   onSnooze: (minutes: 5 | 10 | 15) => void;
   label: string;
+  direction?: 'up' | 'down';
 }
 
 const OPTIONS: { value: 5 | 10 | 15; label: string }[] = [
@@ -12,7 +13,7 @@ const OPTIONS: { value: 5 | 10 | 15; label: string }[] = [
   { value: 15, label: '15 minutes' },
 ];
 
-export default function SnoozeDropdown({ onSnooze, label }: SnoozeDropdownProps) {
+export default function SnoozeDropdown({ onSnooze, label, direction = 'up' }: SnoozeDropdownProps) {
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -38,7 +39,9 @@ export default function SnoozeDropdown({ onSnooze, label }: SnoozeDropdownProps)
         <span className="text-[11px] font-medium">Snooze</span>
       </button>
       {open && (
-        <div className="absolute right-0 bottom-full mb-1 w-32 rounded-md border bg-popover shadow-lg z-50 py-1 animate-fade-in">
+        <div className={`absolute right-0 w-32 rounded-md border bg-popover shadow-lg z-50 py-1 animate-fade-in ${
+          direction === 'up' ? 'bottom-full mb-1' : 'top-full mt-1'
+        }`}>
           {OPTIONS.map((opt) => (
             <button
               key={opt.value}
diff --git a/frontend/src/hooks/useAlerts.tsx b/frontend/src/hooks/useAlerts.tsx
index 5dec435..dbb8d4c 100644
--- a/frontend/src/hooks/useAlerts.tsx
+++ b/frontend/src/hooks/useAlerts.tsx
@@ -110,6 +110,7 @@ export function AlertsProvider({ children }: { children: ReactNode }) {
           <SnoozeDropdown
             onSnooze={(m) => snoozeRef.current(reminder.id, m)}
             label={reminder.title}
+            direction="down"
           />
           <button
             onClick={() => dismissRef.current(reminder.id)}