From 2ee773d5de893eb3a86e94fdd493be717f5eb007 Mon Sep 17 00:00:00 2001
From: "anthropic-code-agent[bot]" <242468646+Claude@users.noreply.github.com>
Date: Fri, 13 Mar 2026 11:49:34 +0000
Subject: [PATCH 1/2] Initial plan


From d6e5447978a1aeea01e86326c1f5029ad953cc86 Mon Sep 17 00:00:00 2001
From: "anthropic-code-agent[bot]" <242468646+Claude@users.noreply.github.com>
Date: Fri, 13 Mar 2026 11:55:26 +0000
Subject: [PATCH 2/2] Make production warning banner less obstructive and more
 attention seeking

Co-authored-by: Jacobjeevan <40040905+Jacobjeevan@users.noreply.github.com>
---
 src/components/Common/ProductionWarningBanner.tsx | 15 +++++++++------
 src/style/index.css                               |  3 ++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Common/ProductionWarningBanner.tsx b/src/components/Common/ProductionWarningBanner.tsx
index e1d8831d797..6557d7ce928 100644
--- a/src/components/Common/ProductionWarningBanner.tsx
+++ b/src/components/Common/ProductionWarningBanner.tsx
@@ -23,12 +23,15 @@ export default function ProductionWarningBanner() {
   }
 
   return (
-    <div className="sticky top-0 z-50 flex items-center justify-between gap-2 bg-red-600 px-4 py-2 text-white shadow-lg">
-      <div className="flex items-center gap-2">
-        <AlertTriangleIcon className="h-5 w-5 shrink-0 animate-pulse" />
-        <span className="text-sm font-semibold">
-          {t("production_warning_banner")}
-        </span>
+    <div className="pointer-events-none fixed inset-x-0 top-4 z-50 flex justify-center">
+      <div className="pointer-events-auto group relative animate-pulse">
+        <div className="absolute -inset-1 rounded-full bg-red-500 opacity-75 blur-sm animate-pulse" />
+        <div className="relative flex items-center gap-2 rounded-full bg-red-600 px-4 py-2 text-white shadow-lg ring-2 ring-red-400 transition-all hover:scale-105 hover:shadow-xl">
+          <AlertTriangleIcon className="h-4 w-4 shrink-0 animate-pulse" />
+          <span className="text-xs font-bold uppercase tracking-wide">
+            {t("production_warning_banner")}
+          </span>
+        </div>
       </div>
     </div>
   );
diff --git a/src/style/index.css b/src/style/index.css
index 3a7b1cf2ea3..b088f8fc9c8 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -365,7 +365,8 @@
     }
 
     /* Collapse everything else for single-print (only when multi-print is NOT also active) */
-    body:has(#single-print):not(:has(#multi-print)) *:not(#single-print):not(#single-print *) {
+    body:has(#single-print):not(:has(#multi-print))
+      *:not(#single-print):not(#single-print *) {
       height: 0 !important;
       min-height: 0 !important;
       max-height: 0 !important;