Skip to content

fix(consent): stack the three choices below 35rem so no label breaks mid-word - #17

Merged
jlc488 merged 1 commit into
mainfrom
fix/consent-stack-buttons
Oct 5, 2026
Merged

jlc488 merged 1 commit into
mainfrom
fix/consent-stack-buttons

Conversation

@jlc488

@jlc488 jlc488 commented Oct 5, 2026

Copy link
Copy Markdown
Contributor

Summary (English)

Follow-up to #16, which was merged before this commit landed on its branch.

At 390px the bar's three equal columns were too narrow for some locales: "Einstellungen" touched its border, "Alle akzeptieren" wrapped, and Spanish/Portuguese/Hindi labels were tight. Now:

  • Below 35rem the three choices (모두 허용 / 거부 / 설정) stack in one column, still equal in size; from 35rem they sit in one row (unchanged on desktop).
  • The settings dialog's footer decides by the dialog's own width (container query; dialog max width 34rem → 40rem), because at 600px French "Enregistrer mes choix" still wrapped inside a 34rem dialog.
  • Buttons never break inside a word (overflow-wrap: normal).

assets/consent/consent-ui.js stays byte-identical to devslab.kr's src/consent/consent-ui.mjs (jlc488/devlab.kr#89).

Verification

  • CI-equivalent run on an LF clone (npm ci --ignore-scripts && npm test): 31/31 pass (the tree is identical to the one tested).
  • Playwright, all 14 hub locales × 390/600px, bar and dialog: equal size, stacked/one row as the rules say, every label on one line, no horizontal overflow — 280/280. Behaviour sweep (first visit no Google, accept loads gtm.js once, reject/dismiss nothing, withdraw deletes _ga*, 390/1440 light/dark) — 36/36.

Owner steps (code can't do these)

  • In GTM-5WGTTWSF (hub) and GTM-5VC3HXL4 (devslab.kr), set every GA4 tag's consent setting to Require additional consent for tag to fire: analytics_storage, then publish both containers.
  • GA4: keep data retention 14 months; Google signals and ad personalisation off.

요약 (한국어)

#16이 이 커밋보다 먼저 머지되어 후속 PR로 올립니다. 390px에서 세 버튼이 좁아 독일어·스페인어·포르투갈어·힌디어 라벨이 빠듯하거나 줄바꿈되던 문제:

  • 35rem 미만에서는 세 버튼을 같은 크기로 세로 배치, 35rem 이상은 한 줄(데스크톱 동일).
  • 설정 대화상자 하단은 대화상자 자체 너비 기준(컨테이너 쿼리, 최대 폭 40rem) — 600px 프랑스어 "Enregistrer mes choix"도 한 줄.
  • 단어 중간 줄바꿈 금지.
  • 검증: LF 클론 npm test 31/31, 14개 언어 × 390/600px 280/280, 동작 36/36.
  • 소유자 할 일: GTM-5WGTTWSF·GTM-5VC3HXL4의 GA4 태그 동의 설정을 *추가 동의 필요: analytics_storage*로 바꾸고 게시.

…mid-word

At 390px, three columns left German, Spanish, Portuguese and Hindi labels
too narrow ("Einstellungen" touched its border, "Alle akzeptieren" wrapped).
Below 35rem the bar's choices now stack in one column, still equal in size;
from 35rem they sit in one row. The settings dialog decides by its own
width (container query; max width now 40rem), since at 600px French
"Enregistrer mes choix" still wrapped in a 34rem dialog. Buttons no longer
break inside a word (overflow-wrap: normal).

Checked in all 14 hub locales at 390px and 600px, bar and dialog: equal
size, stacked or one row as intended, every label on one line, no
horizontal overflow (280/280).

Same file as devslab.kr's src/consent/consent-ui.mjs.
@jlc488
jlc488 merged commit 02d4597 into main Oct 5, 2026
1 check passed
@jlc488
jlc488 deleted the fix/consent-stack-buttons branch October 5, 2026 23:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant