From d8001fc2c421060b88a47619b8874ab8c8a9d664 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Fri, 9 Jan 2026 16:04:13 +0100
Subject: [PATCH] fix: Move staging banner to top-left to avoid overlap with
 activity monitor

- Position banner at top-left instead of bottom-right
- Make banner more compact to reduce visual clutter
- Avoids overlap with ActivityFeed (bottom-right) and ChatWidget (bottom-left)
- Smaller, cleaner design that doesn't interfere with content
---
 components/StagingBanner.tsx | 39 +++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/components/StagingBanner.tsx b/components/StagingBanner.tsx
index 8157353..aca5644 100644
--- a/components/StagingBanner.tsx
+++ b/components/StagingBanner.tsx
@@ -33,43 +33,40 @@ export function StagingBanner() {
   return (
     <AnimatePresence>
       <motion.div
-        initial={{ scale: 0, opacity: 0, x: 20, y: 20 }}
+        initial={{ scale: 0, opacity: 0, x: -20, y: -20 }}
         animate={{ scale: 1, opacity: 1, x: 0, y: 0 }}
         exit={{ scale: 0, opacity: 0 }}
         transition={{ type: "spring", damping: 20, stiffness: 300 }}
-        className="fixed z-50 max-w-sm"
+        className="fixed z-50 max-w-xs"
         style={{ 
-          bottom: '1.5rem', 
-          right: '1.5rem', 
-          top: 'auto',
-          left: 'auto'
+          top: '1rem', 
+          left: '1rem', 
+          bottom: 'auto',
+          right: 'auto'
         }}
       >
-        <div className="bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500 text-white rounded-xl shadow-2xl border-2 border-white/20 backdrop-blur-sm overflow-hidden">
-          {/* Header */}
-          <div className="bg-black/20 px-4 py-2 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <AlertTriangle className="w-4 h-4 animate-pulse" />
-              <span className="font-bold text-xs uppercase tracking-wide">
-                Test Environment
+        <div className="bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500 text-white rounded-lg shadow-2xl border-2 border-white/20 backdrop-blur-sm overflow-hidden">
+          {/* Compact Header with Close */}
+          <div className="px-3 py-2 flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <AlertTriangle className="w-4 h-4 animate-pulse flex-shrink-0" />
+              <span className="font-bold text-xs uppercase tracking-wide truncate">
+                🧪 Test Environment
               </span>
             </div>
             <button
               onClick={() => setIsVisible(false)}
-              className="p-1 hover:bg-white/20 rounded transition-colors"
+              className="p-1 hover:bg-white/20 rounded transition-colors flex-shrink-0"
               aria-label="Close banner"
             >
               <X className="w-3 h-3" />
             </button>
           </div>
           
-          {/* Content */}
-          <div className="px-4 py-3">
-            <p className="text-sm font-semibold mb-1">
-              🧪 Development Version
-            </p>
-            <p className="text-xs text-white/90 leading-relaxed">
-              This is a staging environment. Not production-ready. Data may be unstable.
+          {/* Compact Content */}
+          <div className="px-3 pb-2">
+            <p className="text-xs text-white/95 leading-tight">
+              Not production-ready. Data may be unstable.
             </p>
           </div>
         </div>