From bfbec335c653e88d6fc68cbbdccb3f70ed61701a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 03:40:06 +0000
Subject: [PATCH 1/2] Initial plan


From 1ae6d5b9b156be07988ee7150e0ef8f44e334793 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 03:45:28 +0000
Subject: [PATCH 2/2] Apply review feedback: fix initialFocusRef, add position
 relative, use 100dvh

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>
---
 packages/react/src/ActionMenu/ActionMenu.module.css    | 10 +++++-----
 .../src/Overlay/Overlay.features.stories.module.css    |  1 +
 .../react/src/Overlay/Overlay.features.stories.tsx     |  1 +
 packages/react/src/Overlay/Overlay.module.css          | 10 +++++-----
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/ActionMenu/ActionMenu.module.css b/packages/react/src/ActionMenu/ActionMenu.module.css
index bf53241a248..af8f43f9067 100644
--- a/packages/react/src/ActionMenu/ActionMenu.module.css
+++ b/packages/react/src/ActionMenu/ActionMenu.module.css
@@ -25,23 +25,23 @@
 
   /* Max-height size tokens (mirror Overlay sizes) */
   &:where([data-max-height-xsmall]) {
-    max-height: min(192px, 100vh);
+    max-height: min(192px, 100dvh);
   }
 
   &:where([data-max-height-small]) {
-    max-height: min(256px, 100vh);
+    max-height: min(256px, 100dvh);
   }
 
   &:where([data-max-height-medium]) {
-    max-height: min(320px, 100vh);
+    max-height: min(320px, 100dvh);
   }
 
   &:where([data-max-height-large]) {
-    max-height: min(432px, 100vh);
+    max-height: min(432px, 100dvh);
   }
 
   &:where([data-max-height-xlarge]) {
-    max-height: min(600px, 100vh);
+    max-height: min(600px, 100dvh);
   }
 
   &:where([data-max-height-fit-content]) {
diff --git a/packages/react/src/Overlay/Overlay.features.stories.module.css b/packages/react/src/Overlay/Overlay.features.stories.module.css
index 78f75790cae..a2cc00ab3a2 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.module.css
+++ b/packages/react/src/Overlay/Overlay.features.stories.module.css
@@ -164,6 +164,7 @@
 }
 
 .ScrollableContent {
+  position: relative;
   padding: var(--base-size-16);
   display: flex;
   flex-direction: column;
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index da17f356a7a..c634b9e7313 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -644,6 +644,7 @@ export const SettingMaxHeight = () => {
         >
           <div className={classes.ScrollableContent}>
             <IconButton
+              ref={confirmButtonRef}
               aria-label="Close"
               onClick={closeOverlay}
               icon={XIcon}
diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css
index 1cf169469e6..4ee3e39b3a2 100644
--- a/packages/react/src/Overlay/Overlay.module.css
+++ b/packages/react/src/Overlay/Overlay.module.css
@@ -87,23 +87,23 @@
   }
 
   &:where([data-max-height-xsmall]) {
-    max-height: min(192px, 100vh);
+    max-height: min(192px, 100dvh);
   }
 
   &:where([data-max-height-small]) {
-    max-height: min(256px, 100vh);
+    max-height: min(256px, 100dvh);
   }
 
   &:where([data-max-height-medium]) {
-    max-height: min(320px, 100vh);
+    max-height: min(320px, 100dvh);
   }
 
   &:where([data-max-height-large]) {
-    max-height: min(432px, 100vh);
+    max-height: min(432px, 100dvh);
   }
 
   &:where([data-max-height-xlarge]) {
-    max-height: min(600px, 100vh);
+    max-height: min(600px, 100dvh);
   }
 
   &:where([data-max-height-fit-content]) {