From f63a7452216003ce89cef5cbd9cc2a7cf684a004 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Fri, 9 Jan 2026 19:32:56 +0100
Subject: [PATCH] fix: Improve ChatWidget text visibility and ActivityFeed
 loading state

- Fix ChatWidget tooltip text being cut off (add z-index and shadow)
- Fix ChatWidget header text overflow with truncate classes
- Add loading state for ActivityFeed so it's visible on production while fetching
- Ensure ActivityFeed shows even when data is loading
---
 app/components/ActivityFeed.tsx | 39 +++++++++++++++++++++++++++++++++
 app/components/ChatWidget.tsx   |  8 +++----
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/app/components/ActivityFeed.tsx b/app/components/ActivityFeed.tsx
index e1824e9..f3eda7d 100644
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
@@ -1198,6 +1198,45 @@ export default function ActivityFeed() {
     );
   }
 
+  // Show loading state if tracking is enabled but no data yet
+  // This ensures the component is visible on production even while loading
+  if (!data && isTrackingEnabled) {
+    return (
+      <div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 flex flex-col items-end gap-3 z-40 font-sans pointer-events-none w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)]">
+        <motion.div
+          initial={{ scale: 0, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          className="pointer-events-auto bg-black/90 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden w-full"
+        >
+          <div className="w-full px-4 py-3 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="relative">
+                <Activity size={18} className="text-white" />
+              </div>
+              <div className="text-left">
+                <h3 className="text-sm font-bold text-white">Live Activity</h3>
+                <p className="text-[10px] text-white/50">Loading...</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleTracking();
+                }}
+                className="p-1.5 hover:bg-white/10 rounded-lg transition-colors"
+                title="Disable activity tracking"
+                aria-label="Disable tracking"
+              >
+                <Eye size={14} className="text-white/60 hover:text-white" />
+              </button>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    );
+  }
+
   if (!data) return null;
 
   const activeCount = [
diff --git a/app/components/ChatWidget.tsx b/app/components/ChatWidget.tsx
index 2bb3407..8de68a1 100644
--- a/app/components/ChatWidget.tsx
+++ b/app/components/ChatWidget.tsx
@@ -214,7 +214,7 @@ export default function ChatWidget() {
             <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse" />
 
             {/* Tooltip */}
-            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-black/90 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-black/90 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-[100] shadow-lg">
               Chat with AI assistant
             </span>
           </motion.div>
@@ -240,11 +240,11 @@ export default function ChatWidget() {
                   </div>
                   <span className="absolute bottom-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-white" />
                 </div>
-                <div>
-                  <h3 className="font-bold text-sm">
+                <div className="min-w-0 flex-1">
+                  <h3 className="font-bold text-sm truncate">
                     Dennis{'\''}s AI Assistant
                   </h3>
-                  <p className="text-xs text-white/80">Always online</p>
+                  <p className="text-xs text-white/80 truncate">Always online</p>
                 </div>
               </div>