Make Dialog footer scrollable on very short viewports (#5629)

Co-authored-by: TylerJDev <[email protected]>
Co-authored-by: hectahertz <[email protected]>

Author: hectahertz

.changeset/little-papayas-knock.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Make Dialog footer scrollable on very short viewports

.changeset/rich-berries-argue.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update the Dialog stress test story to go fullscreen on narrow screens

.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Css-dark-colorblind-linux.png

@@ -123,7 +123,7 @@ export const StressTest = ({width, height, subtitle}: DialogStoryProps) => {
   const onDialogClose = useCallback(() => setIsOpen(false), [])
   const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])
   const openSecondDialog = useCallback(() => setSecondOpen(true), [])
-  const manyButtons = new Array(3).fill(undefined).map((_, i) => ({content: `Button ${i}`}))
+  const manyButtons = new Array(7).fill(undefined).map((_, i) => ({content: `Button ${i}`}))
   return (
     <>
       <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>

.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Css-dark-high-contrast-linux.png

@@ -243,11 +243,18 @@
 .Footer {
   z-index: 1;
   display: flex;
+  flex-flow: wrap;
+  justify-content: flex-end;
   padding: var(--base-size-16);
   /* stylelint-disable-next-line primer/box-shadow */
   box-shadow: 0 -1px 0 var(--borderColor-default);
-  flex-flow: wrap;
-  justify-content: flex-end;
   gap: var(--base-size-8);
   flex-shrink: 0;
+
+  @media (max-height: 325px) {
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    flex-direction: row;
+    justify-content: unset;
+  }
 }

.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Css-light-high-contrast-linux.png

@@ -631,7 +631,12 @@ const StyledFooter = toggleStyledComponent(
     gap: ${get('space.2')};
     z-index: 1;
     flex-shrink: 0;
-
+    @media (max-height: 325px) {
+      flex-wrap: nowrap;
+      overflow-x: scroll;
+      flex-direction: row;
+      justify-content: unset;
+    }
     ${sx};
   `,
 )