fix: Improve ChatWidget text visibility and ActivityFeed loading state
Some checks failed
Production Deployment (Zero Downtime) / deploy-production (push) Has been cancelled

- 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
This commit is contained in:
2026-01-09 19:32:56 +01:00
parent 4e48f55737
commit f63a745221
2 changed files with 43 additions and 4 deletions

View File

@@ -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 = [