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 =
- '
This site uses cookies via Microsoft Clarity to understand how visitors use Data Privacy Stack. ' +
+ '
Clarity analytics cookies. ' +
'Learn more
' +
'' +
'' +
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;
}
}