From 15a18798032313ea0e13c0773320f07e87fbd38b Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Sun, 3 May 2026 09:08:05 +0200
Subject: [PATCH] fix: Cookie banner closeable + sidebar accessible while
 banner is open

- X button to close banner (SDK admin context only)
- Overlay leaves sidebar area accessible (ml-16/ml-64)
- Click overlay backdrop to dismiss
- Preview page: close banner on API error (don't trap user)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../app/sdk/cookie-banner/preview/page.tsx         |  2 ++
 .../components/sdk/CookieBannerOverlay.tsx         | 14 +++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/admin-compliance/app/sdk/cookie-banner/preview/page.tsx b/admin-compliance/app/sdk/cookie-banner/preview/page.tsx
index 5f209c9..22df09a 100644
--- a/admin-compliance/app/sdk/cookie-banner/preview/page.tsx
+++ b/admin-compliance/app/sdk/cookie-banner/preview/page.tsx
@@ -106,6 +106,8 @@ export default function CookieBannerPreviewPage() {
       setShowBanner(false)
     } catch (err: any) {
       setApiResult({ error: err.message })
+      // Close banner even on error — don't trap the user
+      setShowBanner(false)
     }
     setSaving(false)
   }, [ewrOnly, fingerprint])
diff --git a/admin-compliance/components/sdk/CookieBannerOverlay.tsx b/admin-compliance/components/sdk/CookieBannerOverlay.tsx
index 9013260..bad67b6 100644
--- a/admin-compliance/components/sdk/CookieBannerOverlay.tsx
+++ b/admin-compliance/components/sdk/CookieBannerOverlay.tsx
@@ -93,16 +93,24 @@ export function CookieBannerOverlay() {
 
   return (
     <>
-      <div className="fixed inset-0 bg-black/40 z-[9998]" />
+      {/* Overlay — leaves sidebar (left 64px/16px) accessible */}
+      <div className="fixed inset-0 ml-16 xl:ml-64 bg-black/30 z-[9998]" onClick={() => setIsOpen(false)} />
 
       <div className="fixed bottom-0 left-0 right-0 z-[9999]">
         <div className="max-w-3xl mx-auto m-4 bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden">
 
-          {/* Header with EWR toggle */}
+          {/* Header with EWR toggle + close button */}
           <div className="px-6 pt-5 pb-3">
             <div className="flex items-start justify-between gap-4">
               <div className="flex-1">
-                <h2 className="text-lg font-semibold text-gray-900">Cookie-Einstellungen</h2>
+                <h2 className="text-lg font-semibold text-gray-900 flex items-center justify-between">
+                  Cookie-Einstellungen
+                  <button onClick={() => setIsOpen(false)} className="text-gray-400 hover:text-gray-600 p-1" aria-label="Schliessen">
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </h2>
                 <p className="text-sm text-gray-600 mt-1">
                   Waehlen Sie, welche Cookie-Kategorien Sie zulassen moechten.
                 </p>