From 34b823c5501023bcba69172a3c7385bf0113b4d9 Mon Sep 17 00:00:00 2001
From: Mel Wong <46764557+melwong-jcc@users.noreply.github.com>
Date: Thu, 24 Aug 2023 16:39:10 -0700
Subject: [PATCH] TCI-1133: mobile theme on trigger container (#834)

---
 .../03-organisms/offcanvas/_offcanvas.scss       | 16 +++++++++-------
 .../03-organisms/offcanvas/offcanvas.js          |  4 ++--
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/source/_patterns/03-organisms/offcanvas/_offcanvas.scss b/source/_patterns/03-organisms/offcanvas/_offcanvas.scss
index ef6d4d1b0..ec95fa53a 100644
--- a/source/_patterns/03-organisms/offcanvas/_offcanvas.scss
+++ b/source/_patterns/03-organisms/offcanvas/_offcanvas.scss
@@ -84,6 +84,15 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
       @include u-margin-bottom(4);
     }
 
+    &.mobile {
+      .block {
+        width: 50%;
+        &:only-child {
+          @include u-width(full);
+        }
+      }
+    }
+
     &.open {
       @include u-display(block);
       @include u-margin-bottom(0);
@@ -104,13 +113,6 @@ $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme);
       a, iframe {
         @include u-width(full, !important);
       }
-
-      &--mobile {
-        width: 50%;
-        &:only-child {
-          @include u-width(full);
-        }
-      }
     }
 
     %jcc-button {
diff --git a/source/_patterns/03-organisms/offcanvas/offcanvas.js b/source/_patterns/03-organisms/offcanvas/offcanvas.js
index c15e21d92..8cd3f08fa 100644
--- a/source/_patterns/03-organisms/offcanvas/offcanvas.js
+++ b/source/_patterns/03-organisms/offcanvas/offcanvas.js
@@ -37,10 +37,10 @@ const autoDesktopDialogHeight = () => {
 const triggersAdjust = (state) => {
   if (state) {
     $(triggerContainer).attr("style", "width: " + $(window).width() + "px");
-    $(offcanvas_triggers).addClass("block--mobile");
+    $(triggerContainer).addClass("mobile");
   } else {
     $(triggerContainer).removeAttr("style");
-    $(offcanvas_triggers).removeClass("block--mobile");
+    $(triggerContainer).removeClass("mobile");
   }
 }