From 6cd97ccabe09b7df7b05b0ac3500b5a469d8d5ef Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Thu, 18 Jan 2024 17:40:01 +0000
Subject: [PATCH] Fixup animations in dialog (#2515)

---
 app/components/primer/alpha/dialog.pcss | 27 ++++++++++++++++---------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss
index 3bce68e7ec..33f7d8e32f 100644
--- a/app/components/primer/alpha/dialog.pcss
+++ b/app/components/primer/alpha/dialog.pcss
@@ -87,18 +87,27 @@ dialog.Overlay:not([open]) {
   &.Overlay--placement-left, &.Overlay--placement-right {
     height: 100%;
     max-height: unset;
+    position: fixed;
+  }
+
+  &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
+    }
   }
 
   &.Overlay--placement-left {
     inset: 0 auto 0 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    animation-name: Overlay--motion-slideInRight;
   }
 
   &.Overlay--placement-right {
     inset: 0 0 0 auto;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    animation-name: Overlay--motion-slideInLeft;
   }
 
   /* start deprecate in favor of Alpha::Dialog */
@@ -147,12 +156,6 @@ dialog.Overlay:not([open]) {
   }
 
   /* end deprecate */
-
-  &.Overlay--motion-scaleFade {
-    @media screen and (prefers-reduced-motion: no-preference) {
-      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
-    }
-  }
 }
 
 @keyframes Overlay--motion-scaleFade {
@@ -340,29 +343,33 @@ dialog.Overlay:not([open]) {
 
 /* --viewportRange-narrowLandscape */
 @media (max-width: 767px) {
-  .Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
+  .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
     height: 100%;
     max-height: 100vh;
+    position: fixed;
   }
 
-  .Overlay--placement-left-whenNarrow {
+  .Overlay.Overlay--placement-left-whenNarrow {
     inset: 0 auto 0 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    animation-name: Overlay--motion-slideInLeft;
   }
 
-  .Overlay--placement-right-whenNarrow {
+  .Overlay.Overlay--placement-right-whenNarrow {
     inset: 0 0 0 auto;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    animation-name: Overlay--motion-slideInLeft;
   }
 
-  .Overlay--placement-bottom-whenNarrow {
+  .Overlay.Overlay--placement-bottom-whenNarrow {
     width: 100%;
     max-width: 100vw;
     inset: auto 0 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    animation-name: Overlay--motion-slideUp;
   }
 
   .Overlay--full-whenNarrow {