From fb5f64f2dcb8d47862e8f61eab0bf76a56b34fc8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 14 May 2026 12:43:57 +0000
Subject: [PATCH] Fix offline banner overlapping mobile nav; add dismiss button

On mobile the banner was fixed at bottom-4, sitting behind the
bottom nav (h-16). Raise it to bottom-20 on mobile screens and
restore bottom-4 on md+ where the nav is hidden. Also adds an X
button so users can dismiss the banner manually.

https://claude.ai/code/session_01BcCgnBbCntUd4tpNYq9azJ
---
 src/components/UpdateNotification.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/UpdateNotification.tsx b/src/components/UpdateNotification.tsx
index 26af3e6..67d2c04 100644
--- a/src/components/UpdateNotification.tsx
+++ b/src/components/UpdateNotification.tsx
@@ -12,6 +12,7 @@ import { RefreshCw, X } from 'lucide-react';
 
 export const UpdateNotification = memo(function UpdateNotification() {
   const [showUpdate, setShowUpdate] = useState(false);
+  const [showOfflineReady, setShowOfflineReady] = useState(true);
 
   const {
     offlineReady: [offlineReady, setOfflineReady],
@@ -50,11 +51,18 @@ export const UpdateNotification = memo(function UpdateNotification() {
     setNeedRefresh(false);
   };
 
-  if (offlineReady && !needRefresh) {
+  if (offlineReady && !needRefresh && showOfflineReady) {
     return (
-      <div className="fixed bottom-4 left-4 z-50 animate-in slide-in-from-bottom-4">
+      <div className="fixed bottom-20 md:bottom-4 left-4 z-50 animate-in slide-in-from-bottom-4">
         <Card className="shadow-lg">
-          <CardContent className="p-4">
+          <CardContent className="p-4 pr-10 relative">
+            <button
+              onClick={() => setShowOfflineReady(false)}
+              className="absolute top-2 right-2 p-1 rounded-full hover:bg-accent transition-colors"
+              aria-label="Dismiss offline ready notification"
+            >
+              <X className="h-4 w-4 text-muted-foreground" />
+            </button>
             <p className="text-sm text-green-600 font-medium">
               ✓ App is ready to work offline
             </p>