From 3336ce77c17da27c8e91938ed42eed4f93dbbd68 Mon Sep 17 00:00:00 2001 From: Marco Date: Sat, 1 Aug 2026 22:12:12 +0000 Subject: [PATCH] Fix Klaro settings modal losing horizontal centering The unconditional max-width:640px override collided with Klaro's own breakpoint-dependent centering (margin:auto only applies above an internal JS-set breakpoint; below it the modal is fixed/width:100% with no left/margin, so the wider modal rendered flush-left instead of centered). Explicit left:50%+translate(-50%,-50%) centers on both axes regardless of which of Klaro's own branches is active. Co-Authored-By: Claude Sonnet 5 --- app/components/KlaroConsentManager.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/app/components/KlaroConsentManager.tsx b/app/components/KlaroConsentManager.tsx index a7a1045..8bd406f 100644 --- a/app/components/KlaroConsentManager.tsx +++ b/app/components/KlaroConsentManager.tsx @@ -125,7 +125,24 @@ function KlaroTheme() { not just inherited from the notice's own styling. Class names confirmed against node_modules/klaro's src/scss/switch.scss + klaro.scss, not guessed. */ - .klaro .cookie-modal { max-width: 640px !important; } + /* Explicit centering on both axes, not Klaro's own margin:auto — + that only applies above Klaro's internal (JS-set, not a CSS var + this theme controls) centerWidth breakpoint; below it the modal + is position:fixed/width:100% with no left/margin at all, so an + unconditional max-width override (needed for the wider 640px + modal below) left it flush against the left edge instead of + centered — confirmed via screenshot 2026-08-02. left:50% + + translate(-50%,-50%) centers correctly at every viewport size + regardless of which of Klaro's own breakpoint branches is active. */ + .klaro .cookie-modal { + position: fixed !important; + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + width: calc(100% - 40px) !important; + max-width: 640px !important; + margin: 0 !important; + } .klaro .cookie-modal .cn-body { padding: 32px 36px !important; } .klaro .cookie-modal h1 { font-size: 26px !important; margin-bottom: 4px !important; } .klaro .cookie-modal > .cn-body > p:first-of-type { color: #6b6b69 !important; margin-bottom: 24px !important; }