chore: fix checkboxes when using long text. (#4366)

* fix long text issue --------- Co-authored-by: Dave Samojlenko <[email protected]>
cds-snc · Oct 7, 2024 · afb161e · afb161e
1 parent 2c791f4
commit afb161e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 14 deletions.
diff --git a/styles/_checkbox.scss b/styles/_checkbox.scss
@@ -3,7 +3,7 @@ Based on GC Design System Checkbox
 See: https://design-system.alpha.canada.ca/en/components/checkbox/ 
 */
 
-@import '../node_modules/@cdssnc/gcds-tokens/build/web/css/components/checkbox.css';
+@import "../node_modules/@cdssnc/gcds-tokens/build/web/css/components/checkbox.css";
 
 .gc-input-checkbox {
   position: relative;
@@ -73,7 +73,8 @@ See: https://design-system.alpha.canada.ca/en/components/checkbox/
   }
 
   .checkbox-label-text {
-    width: auto !important;
+    // @todo look at applying making the width auto here
+    // so the user only clicks on the text not white space. 
     font: var(--gcds-label-font-desktop);
     @apply font-noto-sans;
     -webkit-font-smoothing: antialiased;

diff --git a/styles/_forms.scss b/styles/_forms.scss
@@ -7,7 +7,7 @@
 
 // Import CSS variables from gcds-tokens
 @import "../node_modules/@cdssnc/gcds-tokens/build/web/css/components/heading.css";
-@import '../node_modules/@cdssnc/gcds-tokens/build/web/css/components/label.css';
+@import "../node_modules/@cdssnc/gcds-tokens/build/web/css/components/label.css";
 @import "./_input";
 @import "./_textarea";
 @import "./checkbox";
@@ -177,29 +177,21 @@
   }
 }
 
-
-
 .gc-input-radio,
 .gc-input-checkbox {
-  @apply flex pt-3 pb-1 px-0 items-center;
+  @apply flex pt-3 pb-1 px-0;
 }
 
 .gc-radio-label,
 .gc-checkbox-label {
-  @apply md:text-sm font-normal text-base flex items-center;
-
-  .radio-label-text {
-    @apply md:mt-10px mt-2;
-  }
+  @apply md:text-sm font-normal text-base flex;
 
   .checkbox-label-text,
   .radio-label-text {
-    @apply xxs:w-cr-label-fold xs:w-cr-label-5s sm:w-cr-label-6s md:w-cr-label-duo lg:w-cr-label-ipad xl:w-cr-label-1025 w-cr-label-desktop;
+    @apply xxs:w-cr-label-fold xs:w-cr-label-5s sm:w-cr-label-6s md:w-cr-label-duo lg:w-cr-label-ipad xl:w-cr-label-1025 w-cr-label-desktop md:mt-10px mt-2;
   }
 }
 
-
-
 .gc-file-input {
   @apply w-full md:text-sm text-base text-gray-700 py-3 pr-2 mt-2 mb-14;