diff --git a/packages/components/src/Modal/Modal.rebuilt.module.css b/packages/components/src/Modal/Modal.rebuilt.module.css
index 4c475874dd..41e3f3981a 100644
--- a/packages/components/src/Modal/Modal.rebuilt.module.css
+++ b/packages/components/src/Modal/Modal.rebuilt.module.css
@@ -37,29 +37,37 @@
   z-index: var(--elevation-modal);
   width: 100%;
   max-width: var(--modal--width);
+  max-height: calc(100dvh - 2 * var(--space-base));
   box-shadow: var(--modal--shadow);
   margin: auto;
-  padding: var(--space-small);
   border: var(--border-base) solid var(--color-border);
   border-radius: var(--radius-base);
   outline: none;
+  overflow: hidden;
   background-color: var(--color-surface);
   flex: 0 0 auto;
 }
+
 .modal:focus-visible {
   box-shadow: var(--shadow-focus);
 }
 
+.modalBody {
+  max-height: inherit;
+  padding: var(--space-small);
+  overflow-y: auto;
+}
+
 /* Adjust `Content` and `Tab` components public padding to match the modal */
 
-.modal > * {
+.modalBody > * {
   --public-content--padding: var(--modal--padding);
   --public-tab--inset: var(--modal--padding-horizontal);
 }
 
 /* Remove the nested `Content` components public padding */
 
-.modal > * > * {
+.modalBody > * > * {
   --public-content--padding: 0;
 }
 
diff --git a/packages/components/src/Modal/Modal.rebuilt.module.css.d.ts b/packages/components/src/Modal/Modal.rebuilt.module.css.d.ts
index 206196edb1..493184d367 100644
--- a/packages/components/src/Modal/Modal.rebuilt.module.css.d.ts
+++ b/packages/components/src/Modal/Modal.rebuilt.module.css.d.ts
@@ -2,6 +2,7 @@ declare const styles: {
   readonly "overlay": string;
   readonly "overlayBackground": string;
   readonly "modal": string;
+  readonly "modalBody": string;
   readonly "header": string;
   readonly "closeButton": string;
   readonly "actionBar": string;
diff --git a/packages/components/src/Modal/Modal.rebuilt.tsx b/packages/components/src/Modal/Modal.rebuilt.tsx
index 5fe8422eac..52fc82f0ab 100644
--- a/packages/components/src/Modal/Modal.rebuilt.tsx
+++ b/packages/components/src/Modal/Modal.rebuilt.tsx
@@ -15,6 +15,7 @@ import type {
 } from "./Modal.types";
 import { useModalStyles } from "./useModalStyles";
 import { MODAL_HEADER_ID } from "./constants";
+import styles from "./Modal.rebuilt.module.css";
 import { Heading } from "../Heading";
 import { ButtonDismiss } from "../ButtonDismiss";
 import { Button } from "../Button";
@@ -164,7 +165,9 @@ export function ModalContent({ children }: ModalContainerProps) {
                       if (startedInsideRef) startedInsideRef.current = true;
                     }}
                   >
-                    {children}
+                    <div className={styles.modalBody} tabIndex={-1}>
+                      {children}
+                    </div>
                   </motion.div>
                 </FloatingFocusManager>
               </ModalOverlay>
diff --git a/packages/site/src/content/Modal/Modal.stories.mdx b/packages/site/src/content/Modal/Modal.stories.mdx
index 77a4754315..689abca3a3 100644
--- a/packages/site/src/content/Modal/Modal.stories.mdx
+++ b/packages/site/src/content/Modal/Modal.stories.mdx
@@ -8,6 +8,12 @@ Modals are overlays that allow users to view, edit, or show informations that
 doesn't require a page to be built. It also prevent users from interacting with
 the rest of the application until a specific action is taken.
 
+## Scrolling
+
+When modal content exceeds the available viewport height, the composed
+`Modal.Provider` implementation automatically handles scrolling within the modal
+itself, whereas the prop based `Modal` will result in scrolling the entire page.
+
 ## Related components
 
 Use [SideDrawer](/components/SideDrawer) if you need to overlay the page's
diff --git a/packages/site/src/pages/visualTests/VisualTestModalPage.tsx b/packages/site/src/pages/visualTests/VisualTestModalPage.tsx
index 8a84db8dda..b3963e4ed0 100644
--- a/packages/site/src/pages/visualTests/VisualTestModalPage.tsx
+++ b/packages/site/src/pages/visualTests/VisualTestModalPage.tsx
@@ -23,6 +23,7 @@ export const VisualTestModalPage = () => {
   const [formModalOpen, setFormModalOpen] = useState(false);
   const [tabModalOpen, setTabModalOpen] = useState(false);
   const [narrowContentModalOpen, setNarrowContentModalOpen] = useState(false);
+  const [overflowModalOpen, setOverflowModalOpen] = useState(false);
 
   return (
     <Box padding="large">
@@ -337,6 +338,124 @@ export const VisualTestModalPage = () => {
                 </Modal.Content>
               </Modal.Provider>
             </section>
+
+            {/* Modal with overflowing content */}
+            <section>
+              <Text size="large">Modal with Overflowing Content</Text>
+              <Button
+                label="Open Modal with Overflowing Content"
+                onClick={() => setOverflowModalOpen(true)}
+              />
+
+              <Modal.Provider
+                open={overflowModalOpen}
+                onRequestClose={() => setOverflowModalOpen(false)}
+              >
+                <Modal.Content>
+                  <Modal.Header title="Modal with Overflowing Content" />
+                  <Content>
+                    <Text>
+                      This modal contains a lot of content to test that the
+                      max-height constraint works correctly and the modal
+                      content scrolls instead of overflowing the viewport.
+                    </Text>
+                    <Text>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      Sed do eiusmod tempor incididunt ut labore et dolore magna
+                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    </Text>
+                    <Text>
+                      Duis aute irure dolor in reprehenderit in voluptate velit
+                      esse cillum dolore eu fugiat nulla pariatur. Excepteur
+                      sint occaecat cupidatat non proident, sunt in culpa qui
+                      officia deserunt mollit anim id est laborum.
+                    </Text>
+                    <Text>
+                      Sed ut perspiciatis unde omnis iste natus error sit
+                      voluptatem accusantium doloremque laudantium, totam rem
+                      aperiam, eaque ipsa quae ab illo inventore veritatis et
+                      quasi architecto beatae vitae dicta sunt explicabo.
+                    </Text>
+                    <Text>
+                      Nemo enim ipsam voluptatem quia voluptas sit aspernatur
+                      aut odit aut fugit, sed quia consequuntur magni dolores
+                      eos qui ratione voluptatem sequi nesciunt.
+                    </Text>
+                    <Text>
+                      Neque porro quisquam est, qui dolorem ipsum quia dolor sit
+                      amet, consectetur, adipisci velit, sed quia non numquam
+                      eius modi tempora incidunt ut labore et dolore magnam
+                      aliquam quaerat voluptatem.
+                    </Text>
+                    <Text>
+                      Ut enim ad minima veniam, quis nostrum exercitationem
+                      ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
+                      commodi consequatur? Quis autem vel eum iure reprehenderit
+                      qui in ea voluptate velit esse quam nihil molestiae
+                      consequatur.
+                    </Text>
+                    <Text>
+                      At vero eos et accusamus et iusto odio dignissimos ducimus
+                      qui blanditiis praesentium voluptatum deleniti atque
+                      corrupti quos dolores et quas molestias excepturi sint
+                      occaecati cupiditate non provident.
+                    </Text>
+                    <Text>
+                      Similique sunt in culpa qui officia deserunt mollitia
+                      animi, id est laborum et dolorum fuga. Et harum quidem
+                      rerum facilis est et expedita distinctio.
+                    </Text>
+                    <Text>
+                      Nam libero tempore, cum soluta nobis est eligendi optio
+                      cumque nihil impedit quo minus id quod maxime placeat
+                      facere possimus, omnis voluptas assumenda est, omnis dolor
+                      repellendus.
+                    </Text>
+                    <Text>
+                      Temporibus autem quibusdam et aut officiis debitis aut
+                      rerum necessitatibus saepe eveniet ut et voluptates
+                      repudiandae sint et molestiae non recusandae.
+                    </Text>
+                    <Text>
+                      Itaque earum rerum hic tenetur a sapiente delectus, ut aut
+                      reiciendis voluptatibus maiores alias consequatur aut
+                      perferendis doloribus asperiores repellat.
+                    </Text>
+                    <Text>
+                      This is additional content to ensure the modal definitely
+                      overflows. The modal should have a max-height set and show
+                      a scrollbar when content exceeds that height.
+                    </Text>
+                    <Text>
+                      More content here to push the boundaries. The scrollbar
+                      should appear when the content height exceeds the
+                      available viewport height minus the edge padding.
+                    </Text>
+                    <Text>
+                      Even more content to make absolutely sure we test the
+                      overflow behavior. This should be enough to trigger
+                      scrolling in most viewport sizes.
+                    </Text>
+                    <Text>
+                      Final paragraph to ensure we have sufficient content to
+                      test the max-height constraint and scrolling behavior of
+                      the modal component.
+                    </Text>
+                  </Content>
+                  <Modal.Actions
+                    primary={{
+                      label: "Save",
+                      onClick: () => setOverflowModalOpen(false),
+                    }}
+                    secondary={{
+                      label: "Cancel",
+                      onClick: () => setOverflowModalOpen(false),
+                    }}
+                  />
+                </Modal.Content>
+              </Modal.Provider>
+            </section>
           </Stack>
         </Stack>
       </Stack>
diff --git a/packages/site/tests/visual/modal.visual.ts b/packages/site/tests/visual/modal.visual.ts
index 6fc462b4ad..e04a57a972 100644
--- a/packages/site/tests/visual/modal.visual.ts
+++ b/packages/site/tests/visual/modal.visual.ts
@@ -213,4 +213,18 @@ test.describe("Modal Visual Tests", () => {
       });
     });
   });
+
+  test.describe("overflowing content modal", () => {
+    test("should test modal with overflowing content", async ({ page }) => {
+      const overflowModalButton = page.getByRole("button", {
+        name: "Open Modal with Overflowing Content",
+        exact: true,
+      });
+      await overflowModalButton.click();
+      await page.waitForTimeout(500);
+      await expect(page).toHaveScreenshot("19-overflow-modal-open.png", {
+        fullPage: true,
+      });
+    });
+  });
 });
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-chromium.png
index ac4174c9ae..77dea3ab26 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-firefox.png
index 8660269a8c..e9c076184a 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-webkit.png
index d4e6607c1b..2df44766aa 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/1-initial-page-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-chromium.png
index 93498726a6..368c5866cb 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-firefox.png
index b586ebd4e6..5718cd192e 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-webkit.png
index 1755773502..f3a0f323d9 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/12-form-modal-filled-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-chromium.png
index ac4174c9ae..77dea3ab26 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-firefox.png
index 8660269a8c..e9c076184a 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-webkit.png
index d4e6607c1b..2df44766aa 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/13-form-modal-closed-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-chromium.png
index 0270e599df..2650cb6714 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-firefox.png
index b8e184820f..3af9e31489 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-webkit.png
index e6579a5a32..a5050efdb1 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/14-tab-modal-general-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-chromium.png
index 7bcabd62d7..ea2451b84e 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-firefox.png
index 3d5e594073..7942b6d8f8 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-webkit.png
index b8b685fdcf..b21fb058d0 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/15-tab-modal-advanced-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-chromium.png
index 968ef524cc..18db6de5d0 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-firefox.png
index 6c8016b5c0..69089cfe7e 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-webkit.png
index a15e88469a..dad3eea1b8 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/16-tab-modal-notifications-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-chromium.png
index ac4174c9ae..77dea3ab26 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-firefox.png
index 8660269a8c..e9c076184a 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-webkit.png
index d4e6607c1b..2df44766aa 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/17-tab-modal-closed-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-chromium.png
index ee5214592a..1f119fad70 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-firefox.png
index b31629523d..5cab45a298 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-webkit.png
index 83b3ed2f29..88cd1fd2f7 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/18-narrow-content-modal-open-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/19-overflow-modal-open-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/19-overflow-modal-open-chromium.png
new file mode 100644
index 0000000000..97dc9a8f6d
Binary files /dev/null and b/packages/site/tests/visual/modal.visual.ts-snapshots/19-overflow-modal-open-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/19-overflow-modal-open-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/19-overflow-modal-open-firefox.png
new file mode 100644
index 0000000000..440250f188
Binary files /dev/null and b/packages/site/tests/visual/modal.visual.ts-snapshots/19-overflow-modal-open-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/19-overflow-modal-open-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/19-overflow-modal-open-webkit.png
new file mode 100644
index 0000000000..980c97954c
Binary files /dev/null and b/packages/site/tests/visual/modal.visual.ts-snapshots/19-overflow-modal-open-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-chromium.png
index d6fb18b5df..b0d9ad96b6 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-firefox.png
index 665e04fc63..805d929672 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-webkit.png
index 952d3ab3f5..5ad1e43c26 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/2-basic-modal-open-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-chromium.png
index ac4174c9ae..77dea3ab26 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-firefox.png
index 8660269a8c..e9c076184a 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-webkit.png
index d4e6607c1b..2df44766aa 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/3-basic-modal-closed-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-chromium.png
index 0f11f7ea0b..cf0bf608d9 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-firefox.png
index 54466fe197..c258e7acf7 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-webkit.png
index 970da6878a..d53b7228ce 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/4-confirmation-modal-open-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-chromium.png
index ac4174c9ae..77dea3ab26 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-firefox.png
index 8660269a8c..e9c076184a 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-webkit.png
index d4e6607c1b..2df44766aa 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/5-confirmation-modal-closed-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-chromium.png
index 8fc44741fb..164173fd74 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-firefox.png
index d54674ccc1..9260eccf67 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-webkit.png
index dc7f81e22f..eabb0f362b 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/6-custom-modal-open-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-chromium.png
index 191f1cc792..3b4a9de9b4 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-firefox.png
index cf5ba20848..e22b6d4e10 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-webkit.png
index 65d25989a7..0c656ce226 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/7-custom-modal-closed-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-chromium.png
index 6449f85185..67beb80068 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-firefox.png
index 2239d93449..2632cded5d 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-webkit.png
index b9584f45a5..2cc06a82ff 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/8-large-modal-open-webkit.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-chromium.png b/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-chromium.png
index ac4174c9ae..77dea3ab26 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-chromium.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-chromium.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-firefox.png b/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-firefox.png
index 8660269a8c..e9c076184a 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-firefox.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-firefox.png differ
diff --git a/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-webkit.png b/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-webkit.png
index d4e6607c1b..2df44766aa 100644
Binary files a/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-webkit.png and b/packages/site/tests/visual/modal.visual.ts-snapshots/9-large-modal-closed-webkit.png differ
diff --git a/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-chromium.png b/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-chromium.png
index ac4174c9ae..77dea3ab26 100644
Binary files a/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-chromium.png and b/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-chromium.png differ
diff --git a/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-firefox.png b/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-firefox.png
index 8660269a8c..e9c076184a 100644
Binary files a/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-firefox.png and b/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-firefox.png differ
diff --git a/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-webkit.png b/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-webkit.png
index d4e6607c1b..2df44766aa 100644
Binary files a/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-webkit.png and b/packages/site/tests/visual/site.visual.ts-snapshots/visual-test-modal-page-webkit.png differ