rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix long cookie names display

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-25 12:50:03 +04:00
parent c43445d487
commit 9d0eff6c66
2 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/cookie-banner/src/components/cookie-list.ts
View File

@@ -13,7 +13,7 @@
// PERFORMANCE OF THIS SOFTWARE. // PERFORMANCE OF THIS SOFTWARE.
import type { CookieItem } from "../client"; import type { CookieItem } from "../client";
import { getCookieDetailLabels, interpolate } from "../i18n"; import { getCookieDetailLabels } from "../i18n";
import { ProboElement } from "./base"; import { ProboElement } from "./base";
import type { ProboCategory } from "./category"; import type { ProboCategory } from "./category";
import type { ProboCookieBannerRoot } from "./cookie-banner-root"; import type { ProboCookieBannerRoot } from "./cookie-banner-root";
@@ -90,9 +90,13 @@ export class ProboCookieList extends ProboElement {
const value = values[slotName] ?? ""; const value = values[slotName] ?? "";
const tpl = labels[key]; const tpl = labels[key];
if (tpl) { if (tpl) {
el.textContent = interpolate(tpl, { value });
const slot = el.querySelector(`[data-slot="${slotName}"]`); 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);
}
} }
} }
} }

23
packages/cookie-banner/src/themed-banner/styles.ts
View File

@@ -43,6 +43,7 @@ export const THEMED_STYLES = `
position: fixed; position: fixed;
z-index: var(--_z-index); z-index: var(--_z-index);
padding: 24px; padding: 24px;
max-width: 100vw;
display: flex; display: flex;
pointer-events: none; pointer-events: none;
} }
@@ -155,6 +156,7 @@ export const THEMED_STYLES = `
border: none; border: none;
color: var(--_accent); color: var(--_accent);
text-decoration: underline; text-decoration: underline;
padding: 8px 0;
} }
.btn-primary { .btn-primary {
@@ -211,7 +213,7 @@ export const THEMED_STYLES = `
probo-category { probo-category {
display: block; display: block;
border-bottom: 1px solid var(--_border); border-bottom: 1px solid var(--_border);
padding: 12px 40px 12px 60px; padding: 12px 40px;
position: relative; position: relative;
} }
@@ -241,12 +243,6 @@ export const THEMED_STYLES = `
margin-top: 2px; margin-top: 2px;
} }
.category-required {
font-size: calc(var(--_font-size) - 2px);
color: var(--_text-secondary);
font-style: italic;
}
.toggle { .toggle {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -300,7 +296,7 @@ export const THEMED_STYLES = `
.cookie-toggle { .cookie-toggle {
position: absolute; position: absolute;
left: 36px; left: 16px;
top: 14px; top: 14px;
background: none; background: none;
border: none; border: none;
@@ -349,17 +345,20 @@ export const THEMED_STYLES = `
} }
.cookie-name { .cookie-name {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500; font-weight: 500;
font-family: monospace; font-family: monospace;
} }
.cookie-detail { .cookie-detail {
color: var(--_text-secondary); font-weight: 500;
} }
.cookie-label { .cookie-detail > span {
font-weight: 500; font-weight: 400;
color: var(--_text);
} }
.branding { .branding {