chore: ensure max-height does not surpass viewport height in Overlay, ActionMenu

.changeset/fuzzy-rabbits-wave.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+chore: ensure max-height does not surpass viewport height in Overlay, ActionMenu

e2e/components/Overlay.test.ts

@@ -39,6 +39,10 @@ const stories = [
     title: 'Positioned Overlays',
     id: 'private-components-overlay-features--positioned-overlays',
   },
+  {
+    title: 'Setting Max Height',
+    id: 'private-components-overlay-features--setting-max-height',
+  },
 ] as const
 
 test.describe('Overlay ', () => {

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: 192px;
+    max-height: min(192px, 100dvh);
   }
 
   &:where([data-max-height-small]) {
-    max-height: 256px;
+    max-height: min(256px, 100dvh);
   }
 
   &:where([data-max-height-medium]) {
-    max-height: 320px;
+    max-height: min(320px, 100dvh);
   }
 
   &:where([data-max-height-large]) {
-    max-height: 432px;
+    max-height: min(432px, 100dvh);
   }
 
   &:where([data-max-height-xlarge]) {
-    max-height: 600px;
+    max-height: min(600px, 100dvh);
   }
 
   &:where([data-max-height-fit-content]) {

packages/react/src/Overlay/Overlay.features.stories.module.css

@@ -162,3 +162,17 @@
 .IssueLink:hover {
   background-color: var(--bgColor-muted);
 }
+
+.ScrollableContent {
+  position: relative;
+  padding: var(--base-size-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-8);
+}
+
+.CloseButtonOverlay {
+  position: absolute;
+  left: var(--base-size-4);
+  top: var(--base-size-4);
+}

packages/react/src/Overlay/Overlay.features.stories.tsx

@@ -605,3 +605,66 @@ export const PositionedOverlays = ({right, role, open}: Args) => {
     </div>
   )
 }
+
+export const SettingMaxHeight = ({open}: Args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
+  const closeOverlay = () => setIsOpen(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  useFocusTrap({
+    containerRef,
+    disabled: !isOpen && !open,
+  })
+
+  return (
+    <div>
+      <Button
+        ref={buttonRef}
+        onClick={() => {
+          setIsOpen(!isOpen)
+        }}
+      >
+        Open overlay with max height
+      </Button>
+      {isOpen || open ? (
+        <Overlay
+          initialFocusRef={closeButtonRef}
+          returnFocusRef={buttonRef}
+          ignoreClickRefs={[buttonRef]}
+          onEscape={closeOverlay}
+          onClickOutside={closeOverlay}
+          width="medium"
+          maxHeight="small"
+          overflow="auto"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Overlay with max height example"
+          ref={containerRef}
+        >
+          <div className={classes.ScrollableContent}>
+            <IconButton
+              ref={closeButtonRef}
+              aria-label="Close"
+              onClick={closeOverlay}
+              icon={XIcon}
+              variant="invisible"
+              className={classes.CloseButtonOverlay}
+            />
+            <Text as="h2">Scrollable Content</Text>
+            <Text as="p">
+              This overlay demonstrates the maxHeight property. The content below will be scrollable when it exceeds the
+              maximum height defined by the small size token, up to the available viewport height.
+            </Text>
+            {Array.from({length: 50}, (_, i) => (
+              <Text key={`item-${i}`} as="p">
+                Content item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua.
+              </Text>
+            ))}
+          </div>
+        </Overlay>
+      ) : null}
+    </div>
+  )
+}

packages/react/src/Overlay/Overlay.module.css

@@ -87,23 +87,23 @@
   }
 
   &:where([data-max-height-xsmall]) {
-    max-height: 192px;
+    max-height: min(192px, 100dvh);
   }
 
   &:where([data-max-height-small]) {
-    max-height: 256px;
+    max-height: min(256px, 100dvh);
   }
 
   &:where([data-max-height-medium]) {
-    max-height: 320px;
+    max-height: min(320px, 100dvh);
   }
 
   &:where([data-max-height-large]) {
-    max-height: 432px;
+    max-height: min(432px, 100dvh);
   }
 
   &:where([data-max-height-xlarge]) {
-    max-height: 600px;
+    max-height: min(600px, 100dvh);
   }
 
   &:where([data-max-height-fit-content]) {