From 5893625df3b5c63935d22aefdf6491f67620f74d Mon Sep 17 00:00:00 2001
From: Nandor_Czegledi <nandor.czegledi@instructure.com>
Date: Wed, 24 Jun 2026 16:58:38 +0200
Subject: [PATCH] feat(ui-modal): on larger screens, inset the fullscreen modal
 from the viewport edge for a11y, fix prettier version mismatch  because of
 the style-dictionary@4.4.0

---
 docs/upgrading/upgrade-guide.md          |  1 +
 package.json                             |  1 +
 packages/ui-modal/src/Modal/v2/README.md |  7 +++++--
 packages/ui-modal/src/Modal/v2/styles.ts | 17 ++++++++++++++---
 pnpm-lock.yaml                           |  3 +++
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/docs/upgrading/upgrade-guide.md b/docs/upgrading/upgrade-guide.md
index 9b7f65041d..0c3f316bda 100644
--- a/docs/upgrading/upgrade-guide.md
+++ b/docs/upgrading/upgrade-guide.md
@@ -961,6 +961,7 @@ type: embed
   added={[
     {name:"borderWidth",note:""},
     {name:"inverseBorderColor",note:""},
+    {name:"fullScreenMargin",note:""},
   ]}
   changed={[
     {oldName:"background",newName:"backgroundColor",note:""},
diff --git a/package.json b/package.json
index 7a7599adb0..a510b48b77 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
     "jsdom": "^26.1.0",
     "lerna": "9.0.7",
     "lint-staged": "^16.4.0",
+    "prettier": "2.8.8",
     "react": "18.3.1",
     "typescript": "6.0.3",
     "typescript-eslint": "^8.59.1",
diff --git a/packages/ui-modal/src/Modal/v2/README.md b/packages/ui-modal/src/Modal/v2/README.md
index 27e3f7d192..3212808cc2 100644
--- a/packages/ui-modal/src/Modal/v2/README.md
+++ b/packages/ui-modal/src/Modal/v2/README.md
@@ -148,8 +148,8 @@ const Example = () => {
         background="primary-inverse"
         margin="medium auto none"
         display="block"
-        width="25rem"
-        height="25rem"
+        width="30rem"
+        height="30rem"
         borderWidth="large"
         id="constrainExample"
       ></View>
@@ -464,6 +464,9 @@ const Example = () => {
       <Modal
         open={open}
         size={smallViewport ? 'fullscreen' : 'small'}
+        // Simulate real small-screen behavior by themeOverride.
+        // On actual small screens this happens automatically, so no theme override is needed.
+        themeOverride={smallViewport ? { fullScreenMargin: '0', borderRadius: '0' } : undefined}
         onDismiss={(event) => {
           if (event.target.id !== 'toggleViewportButton') {
             setOpen(false)
diff --git a/packages/ui-modal/src/Modal/v2/styles.ts b/packages/ui-modal/src/Modal/v2/styles.ts
index 3e3f98499f..1132957bda 100644
--- a/packages/ui-modal/src/Modal/v2/styles.ts
+++ b/packages/ui-modal/src/Modal/v2/styles.ts
@@ -23,7 +23,7 @@
  */
 
 import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
-import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { ModalProps, ModalStyle } from './props'
 
 /**
@@ -39,7 +39,8 @@ import type { ModalProps, ModalStyle } from './props'
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['Modal']>,
-  props: ModalProps
+  props: ModalProps,
+  sharedTokens: SharedTokens
 ): ModalStyle => {
   const { size, variant, overflow } = props
 
@@ -75,7 +76,17 @@ const generateStyle = (
       height: '100%',
       boxShadow: 'none',
       border: 'none',
-      borderRadius: 0
+      borderRadius: 0,
+      // On larger screens, inset the fullscreen modal from the viewport edge
+      // for a11y: the Mask flex-centers it, so `flex: 1` + `alignSelf: stretch`
+      // (auto height) gap it evenly via the margin; corners/shadow restored too.
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.md})`]: {
+        margin: componentTheme.fullScreenMargin,
+        height: 'auto',
+        alignSelf: 'stretch',
+        borderRadius: componentTheme.borderRadius,
+        boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow)
+      }
     }
   }
   const backgroundStyles =
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 37837fedb6..06152d253f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -153,6 +153,9 @@ importers:
       moment-timezone:
         specifier: ^0.6.2
         version: 0.6.2
+      prettier:
+        specifier: 2.8.8
+        version: 2.8.8
       react:
         specifier: 18.3.1
         version: 18.3.1