Allow Overlay contents to properly grow/shrink

.changeset/sweet-ladybugs-rest.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add `width: 100%` to `Portal`

packages/react/src/ActionList/ActionList.dev.stories.tsx

@@ -9,6 +9,7 @@ import {Description} from './Description'
 import Avatar from '../Avatar'
 import {FileDirectoryIcon, HeartFillIcon} from '@primer/octicons-react'
 import {Stack} from '../Stack'
+import {AnchoredOverlay} from '../AnchoredOverlay'
 
 export default {
   title: 'Components/ActionList/Dev',
@@ -300,3 +301,77 @@ export const ItemLabelStylesWithMixedDescriptions = () => (
     </Stack>
   </Stack>
 )
+
+export const OverlayWrapping = () => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '100px'}}>
+      <div style={{width: '300px', border: 'solid 1px gray'}}>
+        <ActionList>
+          <ActionList.Item>[email protected]</ActionList.Item>
+          <ActionList.Item>
+            [email protected]
+            <ActionList.TrailingVisual>
+              <HeartFillIcon />
+            </ActionList.TrailingVisual>
+          </ActionList.Item>
+          <ActionList.Item>
+            [email protected]
+            <ActionList.LeadingVisual>
+              <HeartFillIcon />
+            </ActionList.LeadingVisual>
+          </ActionList.Item>
+          <ActionList.Item>This is a long item title long long long oh wow</ActionList.Item>
+          <ActionList.Item>
+            This is a long item title long long long oh wow
+            <ActionList.TrailingVisual>
+              <HeartFillIcon />
+            </ActionList.TrailingVisual>
+          </ActionList.Item>
+        </ActionList>
+      </div>
+
+      <div>
+        <AnchoredOverlay
+          open
+          renderAnchor={props => (
+            <button type="button" {...props}>
+              Overlay
+            </button>
+          )}
+        >
+          <ActionList role="menu">
+            <ActionList.Item role="menuitem">This menu should grow a bit</ActionList.Item>
+          </ActionList>
+        </AnchoredOverlay>
+      </div>
+
+      <div>
+        <AnchoredOverlay
+          open
+          width="small"
+          renderAnchor={props => (
+            <button type="button" {...props}>
+              Overlay
+            </button>
+          )}
+        >
+          <ActionList role="menu">
+            <ActionList.Item role="menuitem">This menu should wrap because it has a small size</ActionList.Item>
+            {/* <ActionList.Item role="menuitem">
+            [email protected]
+            <ActionList.TrailingVisual>
+              <HeartFillIcon />
+            </ActionList.TrailingVisual>
+          </ActionList.Item> */}
+            {/* <ActionList.Item role="menuitem">
+            [email protected]
+            <ActionList.LeadingVisual>
+              <HeartFillIcon />
+            </ActionList.LeadingVisual>
+          </ActionList.Item> */}
+          </ActionList>
+        </AnchoredOverlay>
+      </div>
+    </div>
+  )
+}

packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`AnchoredOverlay > should render consistently when open 1`] = `
     </button>
     <div
       id="__primerPortalRoot__"
-      style="position: absolute; top: 0px; left: 0px;"
+      style="position: absolute; top: 0px; left: 0px; width: 100%;"
     >
       <div
         style="position: relative; z-index: 1;"

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

@@ -10,6 +10,7 @@
 
 .Overlay {
   position: absolute;
+  max-width: calc(100vw - 2rem);
   width: auto;
   min-width: 192px;
   height: auto;

packages/react/src/Portal/Portal.tsx

@@ -30,6 +30,7 @@ function ensureDefaultPortal() {
       defaultPortalContainer.style.position = 'absolute'
       defaultPortalContainer.style.top = '0'
       defaultPortalContainer.style.left = '0'
+      defaultPortalContainer.style.width = '100%'
       const suitablePortalRoot = document.querySelector('[data-portal-root]')
       if (suitablePortalRoot) {
         suitablePortalRoot.appendChild(defaultPortalContainer)