[Modal] Add body container and set flex-grow for xs viewports (#11487)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

⚠️ **Important**
**This PR needs to be released with changes to Shopify/web
https://github.com/Shopify/web/pull/115536**

Context:
This PR is re-doing the changes of
#11354. When
#11354 there was a regression in
Shopify POS that needed to be rolled back. I've since found a fix for
the issue in https://github.com/Shopify/web/pull/115536. These two PRs
need to be released to web at the same time in order to fix the issue in
the Modal component AND prevent the regression in POS when polaris-react
version gets bumped.

Addresses #11185 <!-- link to
issue if one exists -->

Before


https://github.com/Shopify/polaris/assets/4642404/8afa1dc4-7193-4616-8537-bbe86db9168f

After


https://github.com/Shopify/polaris/assets/4642404/c463c9e7-14e5-4edd-be65-430e69abb19d







<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

  Include a video if your changes include interactive content.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

  <details>
    <summary>Summary of your gif(s)</summary>
    <img src="..." alt="Description of what the gif shows">
  </details>
-->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/honest-students-shave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+[Modal] Fixed Footer position to bottom of container

polaris-react/src/components/Modal/Modal.module.scss

@@ -2,8 +2,13 @@
 
 $small-width: 620px;
 
-.Body {
-  width: 100%;
+.Body,
+.NoScrollBody {
+  flex-grow: 1;
+
+  @media #{$p-breakpoints-md-up} {
+    flex-grow: unset;
+  }
 }
 
 .IFrame {

polaris-react/src/components/Modal/Modal.tsx

@@ -169,9 +169,11 @@ export const Modal: React.FunctionComponent<ModalProps> & {
     );
 
     const scrollContainerMarkup = noScroll ? (
-      <Box width="100%" overflowX="hidden" overflowY="hidden">
-        {body}
-      </Box>
+      <div className={styles.NoScrollBody}>
+        <Box width="100%" overflowX="hidden" overflowY="hidden">
+          {body}
+        </Box>
+      </div>
     ) : (
       <Scrollable
         shadow