fix(modal): Update breakpoint for full variant to small (#5222)

* fix(modal): update breakpoint for full variant to small

* chore(modal): update docs

* chore(modal): update docs

* fix(modal): update layout handling

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

@@ -296,14 +296,16 @@
 
   // Behaves like large size when not in a small viewport
   .slds-modal__container {
-    width: 90%;
-    max-width: none;
-    min-width: 40rem;
+    @include mq-medium-min {
+      width: 90%;
+      max-width: none;
+      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.
@@ -337,6 +339,7 @@
         "header"
         "content"
         "footer";
+      grid-template-columns: 1fr;
     }
 
     /**

ui/components/modals/docs.mdx

@@ -126,7 +126,7 @@ Modals, by definition, trap focus. This means that if a user presses Tab or Shif
 
 ### Full
 
-Use the `slds-modal_full` class to give the modal a full screen appearance in mobile device screens, or small form factors. The modal will take on the same appearance as the large size modal when on a medium form factor or larger (from 768px and larger).
+Use the `slds-modal_full` class to give a full screen appearance in small form factors that fall within the `$mq-small` token value. Form factors outside of `$mq-small` will take on the appearance of the large modal.
 
 <CodeView frameOnly frameStyles={{ height: '640px' }} frameTitle="Example mobile styles for full example">
   {getDisplayElementById(Base.examples, 'full')}