Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Klaro settings modal losing horizontal centering

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-08-01 22:12:12 +00:00
parent 90c52687bf
commit 3336ce77c1
1 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/KlaroConsentManager.tsx
+18 -1
View File
@@ -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; }