fix(modal): update breakpoint to mq-small

Author: jessebrack

ui/components/modals/RELEASENOTES.md

@@ -5,23 +5,33 @@
 <!-- ## [Unreleased] -->
 
 ## 2.22.0
+
 ### Changed
+
 - Optimized full size option and refactored to use CSS grid.
+- Updated full size variant to trigger at the `$mq-small` breakpoint to prevent larger devices from receiving the variant.
 
 ## 2.21.0
-### Fixed  
+
+### Fixed
+
 - Fixed `aria-labelledby` to meet accessibility requirements specifically for screen readers.
 
 ## 2.21.0
+
 ### Changed
-- Added full size option for modal. This will allow the modal to reach full screen for mobile screen size and devices. When screen is bigger than mobile screen width (from 768px), full size modal will take on large size modal behaviour. 
+
+- Added full size option for modal. This will allow the modal to reach full screen for mobile screen size and devices. When screen is bigger than mobile screen width (from 768px), full size modal will take on large size modal behaviour.
 - Changed close button to meet accessibility requirement when in full size and in mobile width.
 
 ## 2.19.0
+
 ### Changed
+
 - Added tabindex to Footless example for programmatic focus use case.
 
 ## 2.18.0
+
 ### Changed
 
 - Added `slds-modal__content_footless` class to example for clarity.

ui/components/modals/base/_index.scss

@@ -301,9 +301,9 @@
     min-width: 40rem;
   }
 
-  // We use mq-medium-max since modal was originally designed as desktop first;
+  // We use mq-small-max since modal was originally designed as desktop first;
   // This saves us from having to duplicate code for the full modifier.
-  @include mq-medium-max {
+  @include mq-small-max {
     // Account for iOS safe areas so our modal doesn't load underneath iOS elements.
     top: env(safe-area-inset-top, 0);
     // Override slds-modal's bottom: 0 so we can make the height dynamic.