From afb161ee9313a236f4e4d9ddbfdd8833badbeef6 Mon Sep 17 00:00:00 2001
From: Tim Arney <timarney@users.noreply.github.com>
Date: Mon, 7 Oct 2024 14:30:28 -0400
Subject: [PATCH] chore: fix checkboxes when using long text. (#4366)

* fix long text issue

---------

Co-authored-by: Dave Samojlenko <dave.samojlenko@cds-snc.ca>
---
 styles/_checkbox.scss |  5 +++--
 styles/_forms.scss    | 16 ++++------------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/styles/_checkbox.scss b/styles/_checkbox.scss
index 68c61a4fca..e32ef34ef9 100644
--- 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
index 9411acf79b..d17d6ea1eb 100755
--- 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;