Fix long cookie names display

Signed-off-by: Émile Ré <emile@getprobo.com>

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);
+        }
       }
     }
   }

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 {