fix(app): fade the dialog card in and land the dim at once

(cherry picked from commit 6ef05705a0)

packages/app/e2e/browser/onboarding.spec.ts

@@ -114,7 +114,7 @@ test("a new user goes from the loading screen straight into setup", async ({ pag
     const launch = await readFirstLaunch(page);
     expect(launch.appBeforeSetup).toBe(false);
     expect(launch.setupOpacityOnArrival).toBeLessThan(1);
-    await expect(page.getByTestId("onboarding-modal")).toHaveCSS("opacity", "1");
+    await expect(setupModal(page)).toHaveCSS("opacity", "1");
   } finally {
     await host.close();
   }

packages/app/e2e/support/helpers/onboarding.ts

@@ -48,7 +48,7 @@ export async function recordFirstLaunch(page: Page): Promise<void> {
     const record: FirstLaunchRecord = { appBeforeSetup: false, setupOpacityOnArrival: null };
     Object.assign(window, { __firstLaunch: record });
     const observer = new MutationObserver(() => {
-      const setup = document.querySelector('[data-testid="onboarding-modal"]');
+      const setup = document.querySelector('[data-testid="onboarding-modal"] [role="dialog"]');
       if (setup) {
         record.setupOpacityOnArrival = Number(getComputedStyle(setup).opacity);
         observer.disconnect();

packages/app/src/components/adaptive-modal-sheet.tsx

@@ -239,8 +239,9 @@ const WEB_EXIT_DURATION_MS = 160;
 const WEB_ENTER_DURATION_MS = 160;
 const WEB_ENTER_ANIMATION_NAME = "paseo-modal-enter";
 
-// The desktop overlay fades in as it fades out. A CSS animation runs from the overlay's first
-// paint, so a dialog that opens on its own, like first-run setup, never pops in.
+// The desktop card fades in; the dim lands at once, so the screen behind is never seen undimmed
+// while the dialog arrives. A CSS animation runs from the card's first paint, so a dialog that opens
+// on its own, like first-run setup, never pops in. Closing fades the whole overlay.
 function ensureWebEnterKeyframes() {
   if (!isWeb || typeof document === "undefined") return;
   if (document.getElementById(WEB_ENTER_ANIMATION_NAME)) return;
@@ -250,6 +251,11 @@ function ensureWebEnterKeyframes() {
   document.head.appendChild(style);
 }
 ensureWebEnterKeyframes();
+const WEB_ENTER_STYLE = {
+  animationName: WEB_ENTER_ANIMATION_NAME,
+  animationDuration: `${WEB_ENTER_DURATION_MS}ms`,
+  animationTimingFunction: "ease-out",
+};
 
 /** The compact sheet's surface: Gorhom's `backgroundComponent` for every bottom sheet. */
 export function SheetBackground({ style }: BottomSheetBackgroundProps) {
@@ -680,6 +686,7 @@ export function AdaptiveModalSheet({
       styles.desktopCard,
       desktopHeight != null && { height: desktopHeight },
       desktopMaxWidth != null && { maxWidth: desktopMaxWidth },
+      isWeb && WEB_ENTER_STYLE,
     ],
     [desktopMaxWidth, desktopHeight],
   );
@@ -689,9 +696,6 @@ export function AdaptiveModalSheet({
       isWeb && {
         zIndex: modalLayer,
         opacity: isWebClosing ? 0 : 1,
-        animationName: WEB_ENTER_ANIMATION_NAME,
-        animationDuration: `${WEB_ENTER_DURATION_MS}ms`,
-        animationTimingFunction: "ease-out",
         transitionDuration: `${WEB_EXIT_DURATION_MS}ms`,
         transitionProperty: "opacity",
         transitionTimingFunction: "ease",