From be2e9564cd8d1532720d07de365408b9b19395c5 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Thu, 12 Dec 2024 17:18:57 -0500
Subject: [PATCH] fix(callout-quote): fix horizontal scroll for callout quote
 (#12164)

* fix(callout-quote): fix horizontal scroll for callout quote

* fix(callout-with-media): box-sizing

* fix(callout-with-media): prevent img overflow

* formatting

---------

Co-authored-by: Andy Blum <andy.blum.01@gmail.com>
---
 .../scss/components/callout-quote/_callout-quote.scss | 11 ++++++-----
 .../callout-with-media/_callout-with-media.scss       |  6 +++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/styles/scss/components/callout-quote/_callout-quote.scss b/packages/styles/scss/components/callout-quote/_callout-quote.scss
index f731e717b69..703ac65c6f8 100644
--- a/packages/styles/scss/components/callout-quote/_callout-quote.scss
+++ b/packages/styles/scss/components/callout-quote/_callout-quote.scss
@@ -20,6 +20,10 @@
 @include quote;
 
 @mixin callout-quote {
+  * {
+    box-sizing: border-box;
+  }
+
   :host(#{$c4d-prefix}-callout-quote) {
     @extend :host(#{$c4d-prefix}-callout);
     @extend :host(#{$c4d-prefix}-callout-text);
@@ -99,12 +103,9 @@
   }
 
   :host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr {
-    margin: $spacing-05;
+    margin: $spacing-05 $spacing-07;
     @include breakpoint(md) {
-      margin: $spacing-05 0;
-    }
-    @include breakpoint(lg) {
-      margin: $spacing-05 $spacing-03;
+      margin: $spacing-05;
     }
   }
 }
diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
index 078c71b64a9..428484df9a4 100644
--- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
+++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
@@ -22,6 +22,10 @@
 @include callout;
 
 @mixin callout-with-media {
+  * {
+    box-sizing: border-box;
+  }
+
   :host(#{$c4d-prefix}-callout-with-media) {
     @extend :host(#{$c4d-prefix}-callout);
 
@@ -179,7 +183,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-callout-with-media-image) .#{$prefix}--image__img {
+  :host(#{$c4d-prefix}-callout-with-media-image) .#{$c4d-prefix}--image__img {
     max-inline-size: 100%;
   }
 }