From 9510d91c61f52ec99abf9a285e8f0eb1a59b570e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Wed, 22 Apr 2026 11:16:59 +0400
Subject: [PATCH] Align theme preview with real themed banner styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix button layout in ThemePreview to match the actual themed-banner:
wrap buttons in spans to mimic custom element wrappers (preventing
flex: 1 from stretching them), use correct padding/background/max-width,
and set explicit line-height: normal. Also clean up dead flex properties
in themed-banner styles.

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 .../snippet/_components/ThemePreview.tsx      | 121 +++++++++---------
 .../cookie-banner/src/themed-banner/styles.ts |   3 +-
 2 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx
index 19decec3e..66b10e76b 100644
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx
@@ -179,7 +179,7 @@ function BannerPreview() {
         fontFamily: "var(--probo-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)",
         fontSize: "var(--probo-font-size, 14px)",
         lineHeight: 1.5,
-        maxWidth: 520,
+        maxWidth: 450,
         width: "100%",
         padding: 24,
       }}
@@ -213,64 +213,67 @@ function BannerPreview() {
         </a>
       </p>
       <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-        <button
-          type="button"
-          style={{
-            flex: 1,
-            minWidth: 0,
-            padding: "10px 16px",
-            borderRadius: "var(--probo-btn-radius, 8px)",
-            border: "1px solid var(--probo-accent, #1a1a1a)",
-            background: "var(--probo-accent, #1a1a1a)",
-            color: "var(--probo-accent-text, #ffffff)",
-            fontFamily: "inherit",
-            fontSize: "var(--probo-font-size, 14px)",
-            fontWeight: 500,
-            cursor: "pointer",
-            whiteSpace: "nowrap",
-          }}
-        >
-          Accept all
-        </button>
-        <button
-          type="button"
-          style={{
-            flex: 1,
-            minWidth: 0,
-            padding: "10px 16px",
-            borderRadius: "var(--probo-btn-radius, 8px)",
-            border: "1px solid var(--probo-border, #e0e0e0)",
-            background: "var(--probo-bg, #ffffff)",
-            color: "var(--probo-text, #1a1a1a)",
-            fontFamily: "inherit",
-            fontSize: "var(--probo-font-size, 14px)",
-            fontWeight: 500,
-            cursor: "pointer",
-            whiteSpace: "nowrap",
-          }}
-        >
-          Reject all
-        </button>
-        <button
-          type="button"
-          style={{
-            flex: 1,
-            minWidth: 0,
-            padding: "10px 16px",
-            borderRadius: "var(--probo-btn-radius, 8px)",
-            border: "none",
-            background: "transparent",
-            color: "var(--probo-accent, #1a1a1a)",
-            fontFamily: "inherit",
-            fontSize: "var(--probo-font-size, 14px)",
-            fontWeight: 500,
-            cursor: "pointer",
-            whiteSpace: "nowrap",
-            textDecoration: "underline",
-          }}
-        >
-          Customize
-        </button>
+        <span>
+          <button
+            type="button"
+            style={{
+              padding: "8px 10px",
+              borderRadius: "var(--probo-btn-radius, 8px)",
+              border: "1px solid var(--probo-accent, #1a1a1a)",
+              background: "var(--probo-accent, #1a1a1a)",
+              color: "var(--probo-accent-text, #ffffff)",
+              fontFamily: "inherit",
+              fontSize: "var(--probo-font-size, 14px)",
+              fontWeight: 500,
+              lineHeight: "normal",
+              cursor: "pointer",
+              whiteSpace: "nowrap",
+            }}
+          >
+            Accept all
+          </button>
+        </span>
+        <span>
+          <button
+            type="button"
+            style={{
+              padding: "8px 10px",
+              borderRadius: "var(--probo-btn-radius, 8px)",
+              border: "1px solid var(--probo-border, #e0e0e0)",
+              background: "color-mix(in srgb, var(--probo-text, #1a1a1a) 8%, var(--probo-bg, #ffffff))",
+              color: "var(--probo-text, #1a1a1a)",
+              fontFamily: "inherit",
+              fontSize: "var(--probo-font-size, 14px)",
+              fontWeight: 500,
+              lineHeight: "normal",
+              cursor: "pointer",
+              whiteSpace: "nowrap",
+            }}
+          >
+            Reject all
+          </button>
+        </span>
+        <span>
+          <button
+            type="button"
+            style={{
+              padding: "8px 10px",
+              borderRadius: "var(--probo-btn-radius, 8px)",
+              border: "none",
+              background: "transparent",
+              color: "var(--probo-accent, #1a1a1a)",
+              fontFamily: "inherit",
+              fontSize: "var(--probo-font-size, 14px)",
+              fontWeight: 500,
+              lineHeight: "normal",
+              cursor: "pointer",
+              whiteSpace: "nowrap",
+              textDecoration: "underline",
+            }}
+          >
+            Customize
+          </button>
+        </span>
       </div>
     </div>
   );
diff --git a/packages/cookie-banner/src/themed-banner/styles.ts b/packages/cookie-banner/src/themed-banner/styles.ts
index 9f7d67c55..3ca2bf6cc 100644
--- a/packages/cookie-banner/src/themed-banner/styles.ts
+++ b/packages/cookie-banner/src/themed-banner/styles.ts
@@ -129,8 +129,6 @@ export const THEMED_STYLES = `
   }
 
   .btn {
-    flex: 1;
-    min-width: 0;
     padding: 8px 10px;
     border-radius: var(--_btn-radius);
     border: 1px solid var(--_border);
@@ -139,6 +137,7 @@ export const THEMED_STYLES = `
     font-family: var(--_font);
     font-size: var(--_font-size);
     font-weight: 500;
+    line-height: normal;
     cursor: pointer;
     transition: background 0.15s, border-color 0.15s;
     white-space: nowrap;