From a1fdbc56237a3ddebb6bc5f83591544249655e49 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Thu, 3 Sep 2026 17:46:06 +0200 Subject: [PATCH 1/2] IBX-12418: Centred choice input rows on the checkbox, not its wrapper `.ids-choice-input-field__input-wrapper` is a block box inheriting the 21px line height, so the 16px inline checkbox sat in a 21.5px line box and its centre fell 2.75px below the wrapper's. `align-items: center` on the row centres that wrapper, not the control, so every CheckboxField and RadioButtonField label sat off-centre against its input. Making the wrapper a flex box shrinks it to the control. Co-Authored-By: Claude --- packages/assets/src/scss/_choice-input-field.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/assets/src/scss/_choice-input-field.scss b/packages/assets/src/scss/_choice-input-field.scss index fe966525..5319e356 100644 --- a/packages/assets/src/scss/_choice-input-field.scss +++ b/packages/assets/src/scss/_choice-input-field.scss @@ -9,6 +9,10 @@ align-items: center; gap: calculateRem(8px); + &__input-wrapper { + display: flex; + } + &--disabled { .ids-choice-input-label { color: var(--ids-input-disabled-text-color, #{$color-neutral-150}); From acaa25598ded17d595724825fc0e801e726a3887 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Thu, 3 Sep 2026 18:18:48 +0200 Subject: [PATCH 2/2] IBX-12418: Reset the browser margin on choice inputs Chrome's UA stylesheet gives checkboxes `margin: 3px 3px 3px 4px` and radios `margin: 3px 3px 0 5px`; with the wrapper now hugging the control, the radio's asymmetric margin put its centre 1.5px off the label's. The back office never showed this because Bootstrap's reboot zeroes input margins; the design system should not depend on that. Co-Authored-By: Claude --- packages/assets/src/scss/mixins/_choice-inputs.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/assets/src/scss/mixins/_choice-inputs.scss b/packages/assets/src/scss/mixins/_choice-inputs.scss index d651b88c..49bb03f1 100644 --- a/packages/assets/src/scss/mixins/_choice-inputs.scss +++ b/packages/assets/src/scss/mixins/_choice-inputs.scss @@ -7,6 +7,7 @@ appearance: none; width: calculateRem(16px); height: calculateRem(16px); + margin: 0; padding: 0; cursor: pointer; }