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

@@ -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>
         ))}

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}

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)}