diff --git a/packages/cookie-banner/src/components/cookie-list.ts b/packages/cookie-banner/src/components/cookie-list.ts index 06b2c72b6..6be2f8980 100644 --- a/packages/cookie-banner/src/components/cookie-list.ts +++ b/packages/cookie-banner/src/components/cookie-list.ts @@ -13,7 +13,7 @@ // PERFORMANCE OF THIS SOFTWARE. import type { CookieItem } from "../client"; -import { getCookieDetailLabels, interpolate } from "../i18n"; +import { getCookieDetailLabels } from "../i18n"; import { ProboElement } from "./base"; import type { ProboCategory } from "./category"; import type { ProboCookieBannerRoot } from "./cookie-banner-root"; @@ -90,9 +90,13 @@ export class ProboCookieList extends ProboElement { const value = values[slotName] ?? ""; const tpl = labels[key]; if (tpl) { - el.textContent = interpolate(tpl, { value }); const slot = el.querySelector(`[data-slot="${slotName}"]`); - if (slot) slot.remove(); + const parts = tpl.split("{{value}}"); + el.textContent = parts[0] ?? ""; + if (slot) { + slot.textContent = value; + el.appendChild(slot); + } } } } diff --git a/packages/cookie-banner/src/themed-banner/styles.ts b/packages/cookie-banner/src/themed-banner/styles.ts index cf6ee3f48..378e91f20 100644 --- a/packages/cookie-banner/src/themed-banner/styles.ts +++ b/packages/cookie-banner/src/themed-banner/styles.ts @@ -43,6 +43,7 @@ export const THEMED_STYLES = ` position: fixed; z-index: var(--_z-index); padding: 24px; + max-width: 100vw; display: flex; pointer-events: none; } @@ -155,6 +156,7 @@ export const THEMED_STYLES = ` border: none; color: var(--_accent); text-decoration: underline; + padding: 8px 0; } .btn-primary { @@ -211,7 +213,7 @@ export const THEMED_STYLES = ` probo-category { display: block; border-bottom: 1px solid var(--_border); - padding: 12px 40px 12px 60px; + padding: 12px 40px; position: relative; } @@ -241,12 +243,6 @@ export const THEMED_STYLES = ` margin-top: 2px; } - .category-required { - font-size: calc(var(--_font-size) - 2px); - color: var(--_text-secondary); - font-style: italic; - } - .toggle { position: relative; display: inline-block; @@ -300,7 +296,7 @@ export const THEMED_STYLES = ` .cookie-toggle { position: absolute; - left: 36px; + left: 16px; top: 14px; background: none; border: none; @@ -349,17 +345,20 @@ export const THEMED_STYLES = ` } .cookie-name { + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; font-weight: 500; font-family: monospace; } .cookie-detail { - color: var(--_text-secondary); + font-weight: 500; } - .cookie-label { - font-weight: 500; - color: var(--_text); + .cookie-detail > span { + font-weight: 400; } .branding {