Merge pull request #230 from six-group/218-checkbox-component-gets-di…

…storted-when-the-label-is-multiline Fix #218 six-checkbox being distorted with multiline text/content
six-group · Mar 26, 2024 · 02b9434 · 02b9434
2 parents 90d31fc + 546b63c
commit 02b9434
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## Upcoming
+
+### Added
+
+### Changed
+
+### Fixed
+
+- Fixed `six-checkbox` checkbox-input being distorted with multiline content/text
+
 ## 4.2.1 - 2024-03-14
 
 ### Fixed

diff --git a/libraries/ui-library/src/components/six-checkbox/six-checkbox.scss b/libraries/ui-library/src/components/six-checkbox/six-checkbox.scss
@@ -29,6 +29,7 @@
   align-items: center;
   justify-content: center;
   width: var(--six-selection-control-toggle-size);
+  min-width: var(--six-selection-control-toggle-size);
   height: var(--six-selection-control-toggle-size);
   border: solid var(--six-border-width) var(--six-input-border-color);
   border-radius: 0;
@@ -43,6 +44,7 @@
     padding: 0;
     margin: 0;
     pointer-events: none;
+    min-width: var(--six-selection-control-toggle-size);
   }
 
   .checkbox__icon {