From 797bd444c030108ec4fce329634093d79b61c9f0 Mon Sep 17 00:00:00 2001
From: Sharon Hart <shhart@microsoft.com>
Date: Mon, 29 Jun 2026 11:53:12 +0300
Subject: [PATCH] Minimize mobile cookie consent banner

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 public/clarity-consent.js |  2 +-
 src/styles/tokens.css     | 27 ++++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/public/clarity-consent.js b/public/clarity-consent.js
index 7a1ff44..a99eb46 100644
--- a/public/clarity-consent.js
+++ b/public/clarity-consent.js
@@ -59,7 +59,7 @@
     banner.setAttribute("role", "dialog");
     banner.setAttribute("aria-label", "Cookie consent");
     banner.innerHTML =
-      '<p>This site uses cookies via Microsoft Clarity to understand how visitors use Data Privacy Stack. ' +
+      '<p>Clarity analytics cookies. ' +
       '<a href="https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-cookies" target="_blank" rel="noopener">Learn more</a></p>' +
       '<div class="consent-buttons">' +
       '<button type="button" id="cookie-consent-decline">Decline</button>' +
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 88f2504..a2642ee 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -120,9 +120,30 @@
 }
 
 @media (max-width: 520px) {
-  #cookie-consent-banner,
+  #cookie-consent-banner {
+    right: 0.5rem;
+    bottom: 0.5rem;
+    left: 0.5rem;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    gap: 0.45rem;
+    width: auto;
+    padding: 0.45rem;
+    font-size: 0.76rem;
+    line-height: 1.25;
+    border-radius: 12px;
+  }
+
+  #cookie-consent-banner p {
+    flex: 1 1 9rem;
+  }
+
   #cookie-consent-banner .consent-buttons {
-    align-items: stretch;
-    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  #cookie-consent-banner button {
+    min-height: 40px;
+    padding: 0.35rem 0.65rem;
   }
 }