Fix backup reminder overlap with bottom tab bar

Increased bottom position from 80px to 96px (bottom-24) on mobile to clear
the tab bar. Also centered the dialog horizontally on mobile for better UX.

Author: greg-hass

web/src/components/GlobalUI.tsx

@@ -63,7 +63,7 @@ export function GlobalUI() {
 
             {/* Backup Reminder Toast */}
             {showBackupReminder && (
-                <div className="fixed bottom-20 md:bottom-6 right-4 md:right-6 z-50 animate-in fade-in slide-in-from-bottom-4">
+                <div className="fixed bottom-24 md:bottom-6 left-4 right-4 md:left-auto md:right-6 z-50 animate-in fade-in slide-in-from-bottom-4">
                     <div className="bg-zinc-900 border border-zinc-800 text-white rounded-xl shadow-2xl p-4 w-80 flex flex-col gap-3">
                         <div className="flex items-start gap-3">
                             <div className="p-2 bg-amber-500/10 rounded-lg shrink-0">