fix(Dialog): Make footer scrollable on very short viewports

Author: hectahertz

.changeset/little-papayas-knock.md

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

packages/react/src/Dialog/Dialog.module.css

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

packages/react/src/Dialog/Dialog.tsx

@@ -626,12 +626,16 @@ const StyledFooter = toggleStyledComponent(
     box-shadow: 0 -1px 0 ${get('colors.border.default')};
     padding: ${get('space.3')};
     display: flex;
-    flex-flow: wrap;
-    justify-content: flex-end;
+    flex-direction: row-reverse;
+    flex-wrap: wrap-reverse;
     gap: ${get('space.2')};
     z-index: 1;
     flex-shrink: 0;
 
+    @media (max-height: 256px) {
+      flex-wrap: nowrap;
+      overflow-x: scroll;
+    }
     ${sx};
   `,
 )
@@ -658,20 +662,22 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
 
   return (
     <>
-      {buttons.map((dialogButtonProps, index) => {
-        const {content, buttonType = 'default', autoFocus = false, ...buttonProps} = dialogButtonProps
-        return (
-          <Button
-            key={index}
-            {...buttonProps}
-            // 'normal' value is equivalent to 'default', this is used for backwards compatibility
-            variant={buttonType === 'normal' ? 'default' : buttonType}
-            ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
-          >
-            {content}
-          </Button>
-        )
-      })}
+      {buttons
+        .map((dialogButtonProps, index) => {
+          const {content, buttonType = 'default', autoFocus = false, ...buttonProps} = dialogButtonProps
+          return (
+            <Button
+              key={index}
+              {...buttonProps}
+              // 'normal' value is equivalent to 'default', this is used for backwards compatibility
+              variant={buttonType === 'normal' ? 'default' : buttonType}
+              ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
+            >
+              {content}
+            </Button>
+          )
+        })
+        .reverse()}
     </>
   )
 }