diff --git a/package.json b/package.json
index fd1d73ce..37566562 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.18.33",
+  "version": "0.18.34",
   "type": "module",
   "scripts": {
     "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",
@@ -10,6 +10,7 @@
     "ios": "npm run build && cap sync && NODE_ENV=development cap run ios",
     "bundle:lit-html": "esbuild ./clientLibs/litHtml.js --bundle --format=esm --outfile=src/js/lib/lit-html.js",
     "format": "pretty-quick --staged",
+    "format:all": "prettier --write .",
     "test": "npm run test:unit",
     "test:unit": "node --import ./tests/unit/env.js --test-isolation=none --test-force-exit --test 'tests/unit/specs/**/*.test.js'",
     "test:unit:coverage": "node --import ./tests/unit/env.js --test-isolation=none --test-force-exit --experimental-test-coverage --test-coverage-include='src/js/**' --test 'tests/unit/specs/**/*.test.js'",
diff --git a/src/css/style.css b/src/css/style.css
index 1b183304..3201d625 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1044,6 +1044,8 @@ tab-bar:not([full-width]) {
 
 .sidebar::backdrop {
   background: var(--overlay-color);
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .sidebar {
@@ -1131,6 +1133,19 @@ tab-bar:not([full-width]) {
   transform: translateX(0);
 }
 
+.sidebar[open]::backdrop {
+  opacity: 1;
+}
+
+.sidebar[open][data-closing] {
+  pointer-events: none;
+  transform: translateX(-100%);
+}
+
+.sidebar[open][data-closing]::backdrop {
+  opacity: 0;
+}
+
 .sidebar-profile {
   padding: 20px 20px 16px 20px;
 }
@@ -5974,6 +5989,26 @@ emoji-picker-dialog emoji-picker,
   }
 }
 
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-down {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
 .bottom-sheet {
   border: var(--hair) solid var(--post-border-color);
   border-bottom: none;
@@ -5997,6 +6032,26 @@ emoji-picker-dialog emoji-picker,
   padding-bottom: var(--safe-area-inset-bottom);
 }
 
+/* Shared scroll region for a bottom sheet's flex-fill body: fills the space
+   between a fixed header/footer and scrolls its own overflow. Requires a
+   flex-column ancestor (the dialog or content wrapper) to give it height. */
+.sheet-scroll-region {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.bottom-sheet[data-closing] {
+  pointer-events: none;
+}
+
+/* Only mobile bottom sheets animate out; on desktop they close instantly. */
+@media (max-width: 799px) {
+  .bottom-sheet[data-closing] {
+    animation: slide-down 0.15s ease-in forwards;
+  }
+}
+
 @media (min-width: 800px) {
   .bottom-sheet {
     padding-bottom: 0;
@@ -6042,6 +6097,10 @@ emoji-picker-dialog emoji-picker,
   animation: fade-in 0.2s ease-out;
 }
 
+.bottom-sheet[data-closing]::backdrop {
+  animation: fade-out 0.15s ease-in forwards;
+}
+
 @media (max-width: 799px) {
   .bottom-sheet-fullscreen {
     top: var(--sheet-top);
@@ -6668,6 +6727,10 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   animation: fade-in 0.2s ease-out;
 }
 
+.modal-dialog[data-closing] {
+  pointer-events: none;
+}
+
 .modal-dialog-title {
   font-size: 24px;
   font-weight: 600;
@@ -6787,6 +6850,11 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   }
 }
 
+.image-alt-text-dialog {
+  display: flex;
+  flex-direction: column;
+}
+
 .image-alt-text-dialog-content {
   padding: 20px;
   display: flex;
@@ -6796,6 +6864,12 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   min-height: 0;
 }
 
+@media (min-width: 800px) {
+  .image-alt-text-dialog-content {
+    max-height: 80vh;
+  }
+}
+
 .image-alt-text-dialog-header {
   display: flex;
   justify-content: space-between;
@@ -7657,6 +7731,7 @@ context-menu-item-group:not(:last-child) .context-menu-item-group {
   word-break: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 8;
+  line-clamp: 8;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -9221,9 +9296,6 @@ tab-bar[full-width] .tab-bar-button {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
 }
 
 @media (min-width: 800px) {
diff --git a/src/index.html b/src/index.html
index 4fc8285d..9be5a1b1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -157,6 +157,7 @@
       import { IdentityResolver } from "/js/atproto.js";
       import { Router } from "/js/router.js";
       import { scrollLocks } from "/js/scrollLocks.js";
+      import { closeWithAnimation } from "/js/dialogHelpers.js";
       import { Api } from "/js/api.js";
       import { auth } from "/js/auth.js";
       import { NotificationService } from "/js/notificationService.js";
@@ -514,7 +515,7 @@
             if (wrapper && typeof wrapper.close === "function") {
               wrapper.close();
             } else {
-              dialog.close();
+              closeWithAnimation(dialog);
             }
           });
         });
diff --git a/src/js/components/account-switcher-dialog.js b/src/js/components/account-switcher-dialog.js
index e31d50e9..d7642e6e 100644
--- a/src/js/components/account-switcher-dialog.js
+++ b/src/js/components/account-switcher-dialog.js
@@ -1,7 +1,7 @@
 import { html, render } from "/js/lib/lit-html.js";
 import { Component } from "/js/components/component.js";
 import { scrollLocks } from "/js/scrollLocks.js";
-import { enableDragToDismiss } from "/js/utils.js";
+import { closeWithAnimation, enableDragToDismiss } from "/js/dialogHelpers.js";
 import { auth, getLoginErrorMessage } from "/js/auth.js";
 import { Signal, ReactiveStore, effect } from "/js/signals.js";
 import { showToast } from "/js/toasts.js";
@@ -101,6 +101,11 @@ class AccountSwitcherDialog extends Component {
               this.close();
             }
           }}
+          @close=${() => {
+            this.scrollLock?.release();
+            this.scrollLock = null;
+            this.dispatchEvent(new CustomEvent("dialog-closed"));
+          }}
         >
           <div class="account-switcher-content">
             <div class="account-switcher-header">
@@ -280,6 +285,7 @@ class AccountSwitcherDialog extends Component {
   open() {
     this.scrollLock ??= scrollLocks.acquire({ target: this });
     const dialog = this.querySelector("dialog");
+    if (dialog?.open) return;
     dialog.showModal();
     enableDragToDismiss(dialog, {
       onClose: () => this.close(),
@@ -290,13 +296,7 @@ class AccountSwitcherDialog extends Component {
   }
 
   close() {
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector("dialog");
-    if (dialog?.open) {
-      dialog.close();
-    }
-    this.dispatchEvent(new CustomEvent("dialog-closed"));
+    return closeWithAnimation(this.querySelector("dialog"));
   }
 }
 
diff --git a/src/js/components/add-to-lists-dialog.js b/src/js/components/add-to-lists-dialog.js
index 17d6e2ad..41b86a2c 100644
--- a/src/js/components/add-to-lists-dialog.js
+++ b/src/js/components/add-to-lists-dialog.js
@@ -1,7 +1,7 @@
 import { html, render } from "/js/lib/lit-html.js";
 import { Component } from "/js/components/component.js";
 import { scrollLocks } from "/js/scrollLocks.js";
-import { enableDragToDismiss } from "/js/utils.js";
+import { closeWithAnimation, enableDragToDismiss } from "/js/dialogHelpers.js";
 import { Signal, SignalSet, ReactiveStore, effect } from "/js/signals.js";
 import { isModerationList } from "/js/dataHelpers.js";
 import { closeIconTemplate } from "/js/templates/icons/closeIcon.template.js";
@@ -110,6 +110,11 @@ class AddToListsDialog extends Component {
             event.preventDefault();
             this.close();
           }}
+          @close=${() => {
+            this.scrollLock?.release();
+            this.scrollLock = null;
+            this.dispatchEvent(new CustomEvent("dialog-closed"));
+          }}
         >
           <div class="add-to-lists-dialog-content">
             <button
@@ -232,6 +237,7 @@ class AddToListsDialog extends Component {
   open() {
     this.scrollLock ??= scrollLocks.acquire({ target: this });
     const dialog = this.querySelector(".add-to-lists-dialog");
+    if (dialog?.open) return;
     dialog.showModal();
     enableDragToDismiss(dialog, {
       onClose: () => this.close(),
@@ -241,13 +247,7 @@ class AddToListsDialog extends Component {
   }
 
   close() {
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector(".add-to-lists-dialog");
-    if (dialog?.open) {
-      dialog.close();
-    }
-    this.dispatchEvent(new CustomEvent("dialog-closed"));
+    return closeWithAnimation(this.querySelector(".add-to-lists-dialog"));
   }
 }
 
diff --git a/src/js/components/animated-sidebar.js b/src/js/components/animated-sidebar.js
index 36375ac5..79b46391 100644
--- a/src/js/components/animated-sidebar.js
+++ b/src/js/components/animated-sidebar.js
@@ -2,6 +2,7 @@ import { html, render } from "/js/lib/lit-html.js";
 import { Component, getChildrenFragment } from "/js/components/component.js";
 import { scrollLocks } from "/js/scrollLocks.js";
 import { isMobileViewport } from "/js/utils.js";
+import { closeWithAnimation } from "/js/dialogHelpers.js";
 
 class AnimatedSidebar extends Component {
   connectedCallback() {
@@ -41,7 +42,18 @@ class AnimatedSidebar extends Component {
             this.close();
           }
         }}
-        @cancel=${() => this.close()}
+        @cancel=${(event) => {
+          event.preventDefault();
+          this.close();
+        }}
+        @close=${() => {
+          this.isOpen = false;
+          this.scrollLock?.release({
+            restoreScroll: this._restoreScroll ?? true,
+          });
+          this.scrollLock = null;
+          this._restoreScroll = null;
+        }}
       >
         <div class="sidebar-content"></div>
       </dialog>`,
@@ -60,20 +72,16 @@ class AnimatedSidebar extends Component {
     }
     this.isOpen = true;
     this.scrollLock ??= scrollLocks.acquire({ target: this });
-    this.querySelector("dialog.sidebar").showModal();
+    const dialog = this.querySelector("dialog.sidebar");
+    dialog.showModal();
   }
 
   close({ restoreScroll = true } = {}) {
     if (!this.isOpen) {
       return;
     }
-    this.isOpen = false;
-    this.scrollLock?.release({ restoreScroll });
-    this.scrollLock = null;
-    const dialog = this.querySelector("dialog.sidebar");
-    if (dialog.hasAttribute("open")) {
-      dialog.close();
-    }
+    this._restoreScroll = restoreScroll;
+    return closeWithAnimation(this.querySelector("dialog.sidebar"));
   }
 }
 
diff --git a/src/js/components/context-menu.js b/src/js/components/context-menu.js
index 0d64cfca..03153b17 100644
--- a/src/js/components/context-menu.js
+++ b/src/js/components/context-menu.js
@@ -1,12 +1,9 @@
 import { html, render } from "/js/lib/lit-html.js";
-import {
-  classnames,
-  enableDragToDismiss,
-  isMobileViewport,
-} from "/js/utils.js";
+import { classnames, isMobileViewport } from "/js/utils.js";
 import { Component, getChildrenFragment } from "/js/components/component.js";
 import { scrollLocks } from "/js/scrollLocks.js";
 import { hapticsImpactLight } from "/js/haptics.js";
+import { closeWithAnimation, enableDragToDismiss } from "/js/dialogHelpers.js";
 
 class ContextMenu extends Component {
   connectedCallback() {
@@ -70,9 +67,16 @@ class ContextMenu extends Component {
                 this.close();
               }
             }}
-            @cancel=${() => {
+            @cancel=${(event) => {
+              event.preventDefault();
               this.close();
             }}
+            @close=${() => {
+              this.scrollLock?.release();
+              this.scrollLock = null;
+              this.isOpen = false;
+              this.render();
+            }}
           >
             ${this._childNodes}
           </dialog>
@@ -89,6 +93,7 @@ class ContextMenu extends Component {
     this.scrollLock ??= scrollLocks.acquire({ target: this });
 
     const dialog = this.querySelector(".context-menu");
+    if (dialog?.open) return;
     dialog.showModal();
 
     // On desktop, position the dialog at the mouse cursor - claude wrote this
@@ -125,12 +130,7 @@ class ContextMenu extends Component {
   }
 
   close() {
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector(".context-menu");
-    dialog.close();
-    this.isOpen = false;
-    this.render();
+    return closeWithAnimation(this.querySelector(".context-menu"));
   }
 }
 
diff --git a/src/js/components/drafts-dialog.js b/src/js/components/drafts-dialog.js
index 49a05d2e..384bfc2c 100644
--- a/src/js/components/drafts-dialog.js
+++ b/src/js/components/drafts-dialog.js
@@ -1,7 +1,8 @@
 import { html, render } from "/js/lib/lit-html.js";
 import { Component } from "/js/components/component.js";
 import { scrollLocks } from "/js/scrollLocks.js";
-import { displayRelativeTime, enableDragToDismiss } from "/js/utils.js";
+import { displayRelativeTime } from "/js/utils.js";
+import { closeWithAnimation, enableDragToDismiss } from "/js/dialogHelpers.js";
 import { Signal, ReactiveStore, effect, untrack } from "/js/signals.js";
 import { confirmModal } from "/js/modals/confirm.modal.js";
 import { showToast } from "/js/toasts.js";
@@ -210,8 +211,8 @@ class DraftsDialog extends Component {
     }
   }
 
-  async _onSelect(draftView) {
-    // Close first, then restore (close-then-restore ordering)
+  _onSelect(draftView) {
+    // Start the close animation, but restore immediately without waiting for it
     this.close();
     this.dispatchEvent(
       new CustomEvent("draft-selected", { detail: { draftView } }),
@@ -264,6 +265,11 @@ class DraftsDialog extends Component {
             event.preventDefault();
             this.close();
           }}
+          @close=${() => {
+            this.scrollLock?.release();
+            this.scrollLock = null;
+            this.dispatchEvent(new CustomEvent("dialog-closed"));
+          }}
         >
           <div class="drafts-dialog-content">
             <div class="drafts-dialog-header">
@@ -325,6 +331,7 @@ class DraftsDialog extends Component {
   open() {
     this.scrollLock ??= scrollLocks.acquire({ target: this });
     const dialog = this.querySelector("dialog");
+    if (dialog?.open) return;
     dialog.showModal();
     enableDragToDismiss(dialog, {
       onClose: () => this.close(),
@@ -335,13 +342,7 @@ class DraftsDialog extends Component {
   }
 
   close() {
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector("dialog");
-    if (dialog?.open) {
-      dialog.close();
-    }
-    this.dispatchEvent(new CustomEvent("dialog-closed"));
+    return closeWithAnimation(this.querySelector("dialog"));
   }
 }
 
diff --git a/src/js/components/edit-profile-dialog.js b/src/js/components/edit-profile-dialog.js
index eee86c39..49a51ab9 100644
--- a/src/js/components/edit-profile-dialog.js
+++ b/src/js/components/edit-profile-dialog.js
@@ -1,14 +1,13 @@
 import { html, render } from "/js/lib/lit-html.js";
 import { Component } from "/js/components/component.js";
 import { scrollLocks } from "/js/scrollLocks.js";
-import { avatarThumbnailUrl } from "/js/dataHelpers.js";
 import {
-  classnames,
+  closeWithAnimation,
   enableDragToDismiss,
-  graphemeCount,
-  readFileAsDataUrl,
   resetScrollOnBlur,
-} from "/js/utils.js";
+} from "/js/dialogHelpers.js";
+import { avatarThumbnailUrl } from "/js/dataHelpers.js";
+import { classnames, graphemeCount, readFileAsDataUrl } from "/js/utils.js";
 import { ImageCompressor } from "/js/imageCompressor.js";
 import "/js/components/image-cropper.js";
 import "/js/components/context-menu.js";
@@ -126,10 +125,15 @@ class EditProfileDialog extends Component {
             this.close();
           }
         }}
+        @close=${() => {
+          this.scrollLock?.release();
+          this.scrollLock = null;
+          this.dispatchEvent(new CustomEvent("edit-profile-closed"));
+        }}
       >
         ${isCropping
           ? html`<div
-              class="edit-profile-dialog-content edit-profile-cropper-content"
+              class="edit-profile-dialog-content edit-profile-cropper-content sheet-scroll-region"
             >
               <div class="edit-profile-dialog-header">
                 <button
@@ -159,7 +163,7 @@ class EditProfileDialog extends Component {
                 ></image-cropper>
               </div>
             </div>`
-          : html`<div class="edit-profile-dialog-content">
+          : html`<div class="edit-profile-dialog-content sheet-scroll-region">
               <div class="edit-profile-dialog-header">
                 <button
                   class="edit-profile-dialog-header-button"
@@ -477,9 +481,9 @@ class EditProfileDialog extends Component {
     this._isOpen = true;
     this.scrollLock ??= scrollLocks.acquire({ target: this });
     const dialog = this.querySelector(".edit-profile-dialog");
+    if (dialog?.open) return;
     if (dialog) {
       dialog.showModal();
-
       enableDragToDismiss(dialog, {
         confirmDismiss: () => this.confirmClose(),
         onClose: () => this.close(),
@@ -510,13 +514,7 @@ class EditProfileDialog extends Component {
 
   close() {
     this._isOpen = false;
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector(".edit-profile-dialog");
-    if (dialog) {
-      dialog.close();
-    }
-    this.dispatchEvent(new CustomEvent("edit-profile-closed"));
+    return closeWithAnimation(this.querySelector(".edit-profile-dialog"));
   }
 }
 
diff --git a/src/js/components/emoji-picker-dialog.js b/src/js/components/emoji-picker-dialog.js
index ea668efb..4193e02f 100644
--- a/src/js/components/emoji-picker-dialog.js
+++ b/src/js/components/emoji-picker-dialog.js
@@ -33,6 +33,13 @@ class EmojiPickerDialog extends Component {
         this.close();
       }
     });
+    dialog.addEventListener("cancel", (event) => {
+      event.preventDefault();
+      this.close();
+    });
+    dialog.addEventListener("close", () => this._finishClose(dialog), {
+      once: true,
+    });
     document.body.appendChild(dialog);
     dialog.showModal();
     this.scrollLock ??= scrollLocks.acquire({ target: this });
@@ -51,10 +58,16 @@ class EmojiPickerDialog extends Component {
     window.removeEventListener("resize", this._reposition);
     this._reposition = null;
     this._picker = null;
-    if (this._dialog?.open) {
-      this._dialog.close();
+    const dialog = this._dialog;
+    if (dialog?.open) {
+      dialog.close();
+    } else {
+      this._finishClose(dialog);
     }
-    this._dialog?.remove();
+  }
+
+  _finishClose(dialog) {
+    dialog?.remove();
     this._dialog = null;
     this._anchor = null;
     this.scrollLock?.release();
diff --git a/src/js/components/image-alt-text-dialog.js b/src/js/components/image-alt-text-dialog.js
index ce5f1555..dd0870a0 100644
--- a/src/js/components/image-alt-text-dialog.js
+++ b/src/js/components/image-alt-text-dialog.js
@@ -1,12 +1,12 @@
 import { html, render } from "/js/lib/lit-html.js";
 import { Component } from "/js/components/component.js";
+import { classnames, graphemeCount } from "/js/utils.js";
+import { scrollLocks } from "/js/scrollLocks.js";
 import {
-  classnames,
+  closeWithAnimation,
   enableDragToDismiss,
-  graphemeCount,
   resetScrollOnBlur,
-} from "/js/utils.js";
-import { scrollLocks } from "/js/scrollLocks.js";
+} from "/js/dialogHelpers.js";
 import { closeIconTemplate } from "/js/templates/icons/closeIcon.template.js";
 
 class ImageAltTextDialog extends Component {
@@ -50,9 +50,15 @@ class ImageAltTextDialog extends Component {
             this.close();
           }
         }}
-        @cancel=${() => {
+        @cancel=${(event) => {
+          event.preventDefault();
           this.close();
         }}
+        @close=${() => {
+          this.scrollLock?.release();
+          this.scrollLock = null;
+          this.dispatchEvent(new CustomEvent("alt-text-dialog-closed"));
+        }}
       >
         <div class="image-alt-text-dialog-content">
           <div class="image-alt-text-dialog-header">
@@ -66,7 +72,7 @@ class ImageAltTextDialog extends Component {
               ${closeIconTemplate()}
             </button>
           </div>
-          <div class="image-alt-text-dialog-body">
+          <div class="image-alt-text-dialog-body sheet-scroll-region">
             ${this.imageUrl
               ? html`<div class="image-alt-text-dialog-image-container">
                   <img src="${this.imageUrl}" alt="Preview" />
@@ -121,6 +127,7 @@ class ImageAltTextDialog extends Component {
   open() {
     this.scrollLock ??= scrollLocks.acquire({ target: this });
     const dialog = this.querySelector(".image-alt-text-dialog");
+    if (dialog?.open) return;
     dialog.showModal();
     this.querySelector(".image-alt-text-dialog-textarea")?.focus({
       preventScroll: true,
@@ -134,16 +141,12 @@ class ImageAltTextDialog extends Component {
 
     resetScrollOnBlur(
       dialog,
-      this.querySelector(".image-alt-text-dialog-content"),
+      this.querySelector(".image-alt-text-dialog-body"),
     );
   }
 
   close() {
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector(".image-alt-text-dialog");
-    dialog.close();
-    this.dispatchEvent(new CustomEvent("alt-text-dialog-closed"));
+    return closeWithAnimation(this.querySelector(".image-alt-text-dialog"));
   }
 
   save() {
diff --git a/src/js/components/new-chat-dialog.js b/src/js/components/new-chat-dialog.js
index 994859ed..3c99419b 100644
--- a/src/js/components/new-chat-dialog.js
+++ b/src/js/components/new-chat-dialog.js
@@ -1,7 +1,11 @@
 import { html, render } from "/js/lib/lit-html.js";
 import { Component } from "/js/components/component.js";
 import { scrollLocks } from "/js/scrollLocks.js";
-import { enableDragToDismiss } from "/js/utils.js";
+import {
+  closeWithAnimation,
+  enableDragToDismiss,
+  resetScrollOnBlur,
+} from "/js/dialogHelpers.js";
 import { Signal, ReactiveStore, effect } from "/js/signals.js";
 import { getDisplayName, MISSING_HANDLE } from "/js/dataHelpers.js";
 import { avatarTemplate } from "/js/templates/avatar.template.js";
@@ -227,6 +231,11 @@ class NewChatDialog extends Component {
             event.preventDefault();
             this.close();
           }}
+          @close=${() => {
+            this.scrollLock?.release();
+            this.scrollLock = null;
+            this.dispatchEvent(new CustomEvent("dialog-closed"));
+          }}
         >
           <div class="new-chat-dialog-content">
             <div class="new-chat-dialog-header">
@@ -298,6 +307,7 @@ class NewChatDialog extends Component {
   open() {
     this.scrollLock ??= scrollLocks.acquire({ target: this });
     const dialog = this.querySelector(".new-chat-dialog");
+    if (dialog?.open) return;
     dialog.showModal();
     this.querySelector(".new-chat-search-input")?.focus({
       preventScroll: true,
@@ -307,16 +317,11 @@ class NewChatDialog extends Component {
       scrollContainer: this.querySelector(".new-chat-results"),
       ignoreTouchTarget: (element) => element.closest("button, input") !== null,
     });
+    resetScrollOnBlur(dialog, this.querySelector(".new-chat-results"));
   }
 
   close() {
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector(".new-chat-dialog");
-    if (dialog?.open) {
-      dialog.close();
-    }
-    this.dispatchEvent(new CustomEvent("dialog-closed"));
+    return closeWithAnimation(this.querySelector(".new-chat-dialog"));
   }
 }
 
diff --git a/src/js/components/post-composer.js b/src/js/components/post-composer.js
index 36143c38..071b63e4 100644
--- a/src/js/components/post-composer.js
+++ b/src/js/components/post-composer.js
@@ -5,15 +5,18 @@ import { postHeaderTextTemplate } from "/js/templates/postHeaderText.template.js
 import { richTextTemplate } from "/js/templates/richText.template.js";
 import {
   classnames,
-  enableDragToDismiss,
   graphemeCount,
   readFileAsDataUrl,
-  resetScrollOnBlur,
   sanitizeUri,
 } from "/js/utils.js";
 import { externalLinkTemplate } from "/js/templates/externalLink.template.js";
 import { confirmModal } from "/js/modals/confirm.modal.js";
 import { scrollLocks } from "/js/scrollLocks.js";
+import {
+  closeWithAnimation,
+  enableDragToDismiss,
+  resetScrollOnBlur,
+} from "/js/dialogHelpers.js";
 import { imageIconTemplate } from "/js/templates/icons/imageIcon.template.js";
 import { emojiIconTemplate } from "/js/templates/icons/emojiIcon.template.js";
 import { closeIconTemplate } from "/js/templates/icons/closeIcon.template.js";
@@ -541,11 +544,17 @@ class PostComposer extends Component {
               }
             }
           }}
-          @cancel=${async () => {
+          @cancel=${async (event) => {
+            event.preventDefault();
             if (await this.confirmClose()) {
               this.close();
             }
           }}
+          @close=${() => {
+            this.scrollLock?.release();
+            this.scrollLock = null;
+            this.dispatchEvent(new CustomEvent("post-composer-closed"));
+          }}
           @keydown=${(e) => {
             if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
               e.preventDefault();
@@ -1236,6 +1245,7 @@ class PostComposer extends Component {
   open() {
     this.scrollLock ??= scrollLocks.acquire({ target: this });
     const dialog = this.querySelector(".post-composer");
+    if (dialog?.open) return;
     dialog.showModal();
     this.querySelector("rich-text-input")?.focus({ preventScroll: true });
 
@@ -1269,11 +1279,7 @@ class PostComposer extends Component {
   }
 
   close() {
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector(".post-composer");
-    dialog.close();
-    this.dispatchEvent(new CustomEvent("post-composer-closed"));
+    return closeWithAnimation(this.querySelector(".post-composer"));
   }
 
   // Drop trailing empty posts and confirm mid-thread empty posts
diff --git a/src/js/components/post-notifications-dialog.js b/src/js/components/post-notifications-dialog.js
index 15ffcf51..2258a3c9 100644
--- a/src/js/components/post-notifications-dialog.js
+++ b/src/js/components/post-notifications-dialog.js
@@ -1,7 +1,7 @@
 import { html, render } from "/js/lib/lit-html.js";
 import { Component } from "/js/components/component.js";
 import { scrollLocks } from "/js/scrollLocks.js";
-import { enableDragToDismiss } from "/js/utils.js";
+import { closeWithAnimation, enableDragToDismiss } from "/js/dialogHelpers.js";
 import "/js/components/toggle-switch.js";
 import { closeIconTemplate } from "/js/templates/icons/closeIcon.template.js";
 
@@ -42,6 +42,11 @@ class PostNotificationsDialog extends Component {
             event.preventDefault();
             this.close();
           }}
+          @close=${() => {
+            this.scrollLock?.release();
+            this.scrollLock = null;
+            this.dispatchEvent(new CustomEvent("dialog-closed"));
+          }}
         >
           <div class="post-notifications-dialog-content">
             <button
@@ -148,8 +153,8 @@ class PostNotificationsDialog extends Component {
   open() {
     this.scrollLock ??= scrollLocks.acquire({ target: this });
     const dialog = this.querySelector(".post-notifications-dialog");
+    if (dialog?.open) return;
     dialog.showModal();
-
     enableDragToDismiss(dialog, {
       onClose: () => this.close(),
       allowUpwardStretch: true,
@@ -158,13 +163,7 @@ class PostNotificationsDialog extends Component {
   }
 
   close() {
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector(".post-notifications-dialog");
-    if (dialog?.open) {
-      dialog.close();
-    }
-    this.dispatchEvent(new CustomEvent("dialog-closed"));
+    return closeWithAnimation(this.querySelector(".post-notifications-dialog"));
   }
 }
 
diff --git a/src/js/components/reactions-dialog.js b/src/js/components/reactions-dialog.js
index 2c5a592a..7b09f066 100644
--- a/src/js/components/reactions-dialog.js
+++ b/src/js/components/reactions-dialog.js
@@ -2,7 +2,7 @@ import { Component } from "/js/components/component.js";
 import { html, render } from "/js/lib/lit-html.js";
 import { effect } from "/js/signals.js";
 import { scrollLocks } from "/js/scrollLocks.js";
-import { enableDragToDismiss } from "/js/utils.js";
+import { closeWithAnimation, enableDragToDismiss } from "/js/dialogHelpers.js";
 import { avatarTemplate } from "/js/templates/avatar.template.js";
 import { getDisplayName, groupReactions } from "/js/dataHelpers.js";
 import { closeIconTemplate } from "/js/templates/icons/closeIcon.template.js";
@@ -38,9 +38,7 @@ class ReactionsDialog extends Component {
   }
 
   _close() {
-    const dialog = this.querySelector(".reactions-dialog");
-    if (dialog?.open) dialog.close();
-    this.dispatchEvent(new CustomEvent("close"));
+    return closeWithAnimation(this.querySelector(".reactions-dialog"));
   }
 
   _getMessage() {
@@ -124,6 +122,11 @@ class ReactionsDialog extends Component {
             event.preventDefault();
             this._close();
           }}
+          @close=${() => {
+            this.scrollLock?.release();
+            this.scrollLock = null;
+            this.dispatchEvent(new CustomEvent("close"));
+          }}
         >
           <div class="reactions-dialog-content">
             <div class="reactions-dialog-header">
diff --git a/src/js/components/report-dialog.js b/src/js/components/report-dialog.js
index 5320026d..8a39746f 100644
--- a/src/js/components/report-dialog.js
+++ b/src/js/components/report-dialog.js
@@ -2,10 +2,11 @@ import { html, render } from "/js/lib/lit-html.js";
 import { Component } from "/js/components/component.js";
 import { scrollLocks } from "/js/scrollLocks.js";
 import {
+  closeWithAnimation,
   enableDragToDismiss,
-  kebabCase,
   resetScrollOnBlur,
-} from "/js/utils.js";
+} from "/js/dialogHelpers.js";
+import { kebabCase } from "/js/utils.js";
 import { avatarTemplate } from "/js/templates/avatar.template.js";
 import { checkIconTemplate } from "/js/templates/icons/checkIcon.template.js";
 import { closeIconTemplate } from "/js/templates/icons/closeIcon.template.js";
@@ -661,6 +662,11 @@ class ReportDialog extends Component {
             e.preventDefault();
             this.close();
           }}
+          @close=${() => {
+            this.scrollLock?.release();
+            this.scrollLock = null;
+            this.dispatchEvent(new CustomEvent("report-dialog-closed"));
+          }}
         >
           <div class="report-dialog-content">
             <button class="report-dialog-close" @click=${() => this.close()}>
@@ -810,8 +816,8 @@ class ReportDialog extends Component {
   open() {
     this.scrollLock ??= scrollLocks.acquire({ target: this });
     const dialog = this.querySelector(".report-dialog");
+    if (dialog?.open) return;
     dialog.showModal();
-
     enableDragToDismiss(dialog, {
       onClose: () => this.close(),
       scrollContainer: this.querySelector(".report-dialog-body"),
@@ -823,11 +829,7 @@ class ReportDialog extends Component {
   }
 
   close() {
-    this.scrollLock?.release();
-    this.scrollLock = null;
-    const dialog = this.querySelector(".report-dialog");
-    dialog.close();
-    this.dispatchEvent(new CustomEvent("report-dialog-closed"));
+    return closeWithAnimation(this.querySelector(".report-dialog"));
   }
 }
 
diff --git a/src/js/dialogHelpers.js b/src/js/dialogHelpers.js
new file mode 100644
index 00000000..01aa4b01
--- /dev/null
+++ b/src/js/dialogHelpers.js
@@ -0,0 +1,228 @@
+import { isMobileViewport } from "/js/utils.js";
+
+function hasExitMotion(element) {
+  if (typeof element.getAnimations !== "function") return false;
+  const styles = getComputedStyle(element);
+  return [styles.animationDuration, styles.transitionDuration].some((value) =>
+    (value ?? "")
+      .split(",")
+      .some((duration) => Number.parseFloat(duration) > 0),
+  );
+}
+
+function waitForExitMotion(dialog) {
+  if (!shouldAnimate(dialog)) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeoutId);
+      dialog.removeEventListener("animationend", onMotionEnd);
+      dialog.removeEventListener("transitionend", onMotionEnd);
+      resolve();
+    };
+    const onMotionEnd = (event) => {
+      if (event.target === dialog) finish();
+    };
+    const timeoutId = setTimeout(finish, 500);
+
+    dialog.addEventListener("animationend", onMotionEnd);
+    dialog.addEventListener("transitionend", onMotionEnd);
+  });
+}
+
+function shouldAnimate(dialog) {
+  return (
+    !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches &&
+    hasExitMotion(dialog)
+  );
+}
+
+// Closes a dialog through its CSS exit animation: keeps it in the top layer
+// until the animation finishes, then calls dialog.close()
+export function closeWithAnimation(dialog) {
+  if (!dialog.open || dialog.hasAttribute("data-closing")) {
+    return Promise.resolve();
+  }
+
+  dialog.dataset.closing = "";
+  dialog.inert = true;
+  const finish = () => {
+    if (dialog.open) dialog.close();
+    dialog.removeAttribute("data-closing");
+    dialog.inert = false;
+  };
+  if (!shouldAnimate(dialog)) {
+    finish();
+    return Promise.resolve();
+  }
+  return waitForExitMotion(dialog).then(finish);
+}
+
+export function enableDragToDismiss(
+  target,
+  {
+    eventSource = target,
+    confirmDismiss = () => true,
+    onClose,
+    allowUpwardStretch = false,
+    ignoreTouchTarget = () => false,
+    scrollContainer = null,
+    disableWhenKeyboardOpen = false,
+  } = {},
+) {
+  if (!isMobileViewport()) return null;
+
+  if (target.__dragToDismiss) {
+    target.__dragToDismiss.cleanup();
+  }
+
+  const DISMISS_THRESHOLD = 75;
+  const RESISTANCE_FACTOR = 0.6;
+  const SNAP_BACK_MS = 150;
+  let caretRestoreTimer = null;
+
+  const dragState = {
+    startY: 0,
+    currentY: 0,
+    isDragging: false,
+    initialHeight: 0,
+    canDismiss: true,
+  };
+
+  // Detect keyboard open on mobile
+  const KEYBOARD_THRESHOLD = 150;
+  const viewport = window.visualViewport;
+  const isKeyboardOpen = () =>
+    disableWhenKeyboardOpen &&
+    viewport &&
+    window.innerHeight - viewport.height > KEYBOARD_THRESHOLD;
+
+  const hasTextSelection = () => {
+    const selection = document.getSelection();
+    return selection !== null && !selection.isCollapsed;
+  };
+
+  const handleTouchStart = (e) => {
+    if (isKeyboardOpen()) return;
+    if (ignoreTouchTarget(e.target)) return;
+    if (hasTextSelection()) return;
+
+    clearTimeout(caretRestoreTimer);
+    dragState.startY = e.touches[0].clientY;
+    dragState.currentY = dragState.startY;
+    dragState.isDragging = true;
+    dragState.initialHeight = target.getBoundingClientRect().height;
+    // Only allow a downward drag to dismiss when the scrollable body is already
+    // at the top; otherwise this gesture belongs to the scroll area.
+    dragState.canDismiss = !scrollContainer || scrollContainer.scrollTop <= 0;
+    dragState.canStretch =
+      allowUpwardStretch &&
+      (!scrollContainer ||
+        scrollContainer.scrollHeight <= scrollContainer.clientHeight);
+
+    target.style.transition = "none";
+  };
+
+  const handleTouchMove = (e) => {
+    if (!dragState.isDragging) return;
+
+    // A selection that appears mid-gesture (long-press) switches to text selection.
+    if (hasTextSelection()) {
+      dragState.isDragging = false;
+      target.style.transform = "";
+      target.style.caretColor = "";
+      return;
+    }
+
+    dragState.currentY = e.touches[0].clientY;
+    const deltaY = dragState.currentY - dragState.startY;
+
+    if (deltaY > 0 && dragState.canDismiss) {
+      e.preventDefault();
+      const adjustedDelta = deltaY * RESISTANCE_FACTOR;
+      // Hide caret while dragging
+      target.style.caretColor = "transparent";
+      target.style.transform = `translateY(${adjustedDelta}px)`;
+    } else if (deltaY < 0 && dragState.canStretch) {
+      e.preventDefault();
+      const adjustedDelta = Math.abs(deltaY) * (RESISTANCE_FACTOR * 0.5);
+      target.style.height = `${dragState.initialHeight + adjustedDelta}px`;
+    } else if (scrollContainer && deltaY !== 0) {
+      dragState.isDragging = false;
+      target.style.transform = "";
+      target.style.caretColor = "";
+    } else {
+      e.preventDefault();
+    }
+  };
+
+  const handleTouchEnd = async () => {
+    if (!dragState.isDragging) return;
+
+    const deltaY = dragState.currentY - dragState.startY;
+    target.style.transition = allowUpwardStretch
+      ? `transform ${SNAP_BACK_MS}ms ease-out, height ${SNAP_BACK_MS}ms ease-out`
+      : `transform ${SNAP_BACK_MS}ms ease-out`;
+
+    if (deltaY > DISMISS_THRESHOLD && (await confirmDismiss())) {
+      target.style.transform = "translateY(100%)";
+      onClose();
+    } else {
+      target.style.transform = "";
+      if (dragState.canStretch) target.style.height = "";
+      caretRestoreTimer = setTimeout(() => {
+        target.style.caretColor = "";
+      }, SNAP_BACK_MS);
+    }
+
+    dragState.isDragging = false;
+  };
+
+  eventSource.addEventListener("touchstart", handleTouchStart, {
+    passive: false,
+  });
+  eventSource.addEventListener("touchmove", handleTouchMove, {
+    passive: false,
+  });
+  eventSource.addEventListener("touchend", handleTouchEnd);
+
+  dragState.cleanup = () => {
+    clearTimeout(caretRestoreTimer);
+    delete target.__dragToDismiss;
+    eventSource.removeEventListener("touchstart", handleTouchStart);
+    eventSource.removeEventListener("touchmove", handleTouchMove);
+    eventSource.removeEventListener("touchend", handleTouchEnd);
+    target.style.transform = "";
+    target.style.transition = "";
+    target.style.height = "";
+    target.style.caretColor = "";
+  };
+
+  target.__dragToDismiss = dragState;
+
+  return dragState;
+}
+
+// iOS Safari: dismissing the keyboard via the "Done" button leaves the
+// dialog's inner scroll area offset, which makes buttons unclickable
+// until the dialog is swiped or re-tapped. Reset scroll on text input blur.
+export function resetScrollOnBlur(dialog, scrollArea) {
+  dialog.addEventListener(
+    "blur",
+    (event) => {
+      if (
+        !event.target.matches?.('input, textarea, [contenteditable="true"]')
+      ) {
+        return;
+      }
+      if (scrollArea) scrollArea.scrollTop = 0;
+      window.scrollTo(0, 0);
+    },
+    true,
+  );
+}
diff --git a/src/js/modals/modal.js b/src/js/modals/modal.js
index f80b7dd4..b9e6b749 100644
--- a/src/js/modals/modal.js
+++ b/src/js/modals/modal.js
@@ -1,6 +1,6 @@
 import { render } from "/js/lib/lit-html.js";
 import { scrollLocks } from "/js/scrollLocks.js";
-import { enableDragToDismiss } from "/js/utils.js";
+import { closeWithAnimation, enableDragToDismiss } from "/js/dialogHelpers.js";
 
 export class Modal {
   static async open(...args) {
@@ -46,13 +46,20 @@ export class Modal {
 
       let scrollLock = null;
       let resolved = false;
+      let dismissValue;
+      let cleanedUp = false;
+      const cleanup = () => {
+        if (cleanedUp) return;
+        cleanedUp = true;
+        scrollLock?.release();
+        dialog.remove();
+        resolve(dismissValue);
+      };
       const dismiss = (value) => {
         if (resolved) return;
         resolved = true;
-        scrollLock?.release();
-        dialog.close();
-        dialog.remove();
-        resolve(value);
+        dismissValue = value;
+        return closeWithAnimation(dialog);
       };
       const dismissIfAllowed = () => {
         if (this.canDismiss()) dismiss();
@@ -66,15 +73,15 @@ export class Modal {
       dialog.addEventListener("click", (event) => {
         if (event.target.tagName === "DIALOG") dismissIfAllowed();
       });
+      document.body.appendChild(dialog);
+      scrollLock = scrollLocks.acquire({ target: dialog });
+      dialog.showModal();
+      dialog.addEventListener("close", cleanup);
       dialog.addEventListener("cancel", (event) => {
         event.preventDefault();
         dismissIfAllowed();
       });
 
-      document.body.appendChild(dialog);
-      scrollLock = scrollLocks.acquire({ target: dialog });
-      dialog.showModal();
-
       if (this.dragToDismiss) {
         enableDragToDismiss(dialog, {
           onClose: () => dismiss(),
diff --git a/src/js/plugins/pluginModal.js b/src/js/plugins/pluginModal.js
index b2db7cb1..ee40874c 100644
--- a/src/js/plugins/pluginModal.js
+++ b/src/js/plugins/pluginModal.js
@@ -1,5 +1,6 @@
 import { html } from "/js/lib/lit-html.js";
 import { confirmModal } from "/js/modals/confirm.modal.js";
+import { closeWithAnimation } from "/js/dialogHelpers.js";
 
 const pluginModals = new Map();
 
@@ -13,6 +14,17 @@ export function showPluginModal({
 }) {
   let modal = pluginModals.get(`${pluginId}:${modalId}`);
   if (modal?.isOpen) return;
+  if (modal?.isDismissing) {
+    modal.nextOpen = {
+      pluginRenderer,
+      pluginId,
+      modalId,
+      title,
+      content,
+      onDismiss,
+    };
+    return;
+  }
 
   if (!modal) {
     const dialog = document.createElement("dialog");
@@ -23,13 +35,35 @@ export function showPluginModal({
     contentEl.classList.add("modal-dialog-content");
     dialog.appendChild(contentEl);
 
-    modal = { dialog, contentEl, isOpen: false };
+    modal = {
+      dialog,
+      contentEl,
+      isOpen: false,
+      isDismissing: false,
+      nextOpen: null,
+    };
+    let userDismissed = false;
+    // Teardown runs on every close — including the router closing it on
+    // navigation, which bypasses the dismiss() wrapper below. This dialog is
+    // created once and reused across opens, so the listener stays attached.
+    dialog.addEventListener("close", () => {
+      modal.isOpen = false;
+      modal.isDismissing = false;
+      if (userDismissed) {
+        userDismissed = false;
+        modal.onDismiss();
+      }
+      const nextOpen = modal.nextOpen;
+      modal.nextOpen = null;
+      if (nextOpen) showPluginModal(nextOpen);
+    });
+    modal.dismiss = () => closeWithAnimation(dialog);
 
     function dismiss() {
       if (!modal.isOpen) return;
-      modal.isOpen = false;
-      dialog.close();
-      onDismiss();
+      userDismissed = true;
+      modal.isDismissing = true;
+      return modal.dismiss();
     }
 
     dialog.addEventListener("click", (event) => {
@@ -44,6 +78,7 @@ export function showPluginModal({
     document.body.appendChild(dialog);
   }
 
+  modal.onDismiss = onDismiss;
   modal.contentEl.replaceChildren();
   if (!pluginRenderer.isEmptyNode(title)) {
     const titleEl = pluginRenderer.createRoot().render(title);
@@ -66,8 +101,8 @@ export function showPluginModal({
 export function hidePluginModal({ pluginId, modalId }) {
   const modal = pluginModals.get(`${pluginId}:${modalId}`);
   if (modal && modal.isOpen) {
-    modal.isOpen = false;
-    modal.dialog.close();
+    modal.isDismissing = true;
+    modal.dismiss();
   }
 }
 
diff --git a/src/js/templates/postEmbed.template.js b/src/js/templates/postEmbed.template.js
index bb98d3fe..234ca7f9 100644
--- a/src/js/templates/postEmbed.template.js
+++ b/src/js/templates/postEmbed.template.js
@@ -9,6 +9,7 @@ import { externalLinkTemplate } from "/js/templates/externalLink.template.js";
 import { avatarTemplate } from "/js/templates/avatar.template.js";
 import { infoIconTemplate } from "/js/templates/icons/infoIcon.template.js";
 import { closeIconTemplate } from "/js/templates/icons/closeIcon.template.js";
+import { closeWithAnimation } from "/js/dialogHelpers.js";
 import "/js/components/plugin-rich-text.js";
 import { postHeaderTextTemplate } from "/js/templates/postHeaderText.template.js";
 import { labelBadgesTemplate } from "/js/templates/labelBadges.template.js";
@@ -368,13 +369,17 @@ function openAltTextDialog(altText) {
   dialog.dataset.testid = "alt-text-dialog";
   dialog.addEventListener("close", () => dialog.remove());
   dialog.addEventListener("click", (e) => {
-    if (e.target === dialog) dialog.close();
+    if (e.target === dialog) closeWithAnimation(dialog);
+  });
+  dialog.addEventListener("cancel", (e) => {
+    e.preventDefault();
+    closeWithAnimation(dialog);
   });
   render(
     html`<button
         class="alt-text-dialog-close"
         data-testid="alt-text-dialog-close"
-        @click=${() => dialog.close()}
+        @click=${() => closeWithAnimation(dialog)}
         aria-label="Close"
       >
         ${closeIconTemplate()}
diff --git a/src/js/utils.js b/src/js/utils.js
index 4664cc3f..04025be3 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -362,171 +362,6 @@ export function sanitizeUri(uri) {
   return "";
 }
 
-// Claude wrote this
-export function enableDragToDismiss(
-  target,
-  {
-    eventSource = target,
-    confirmDismiss = () => true,
-    onClose,
-    allowUpwardStretch = false,
-    ignoreTouchTarget = () => false,
-    scrollContainer = null,
-    disableWhenKeyboardOpen = false,
-  } = {},
-) {
-  if (!isMobileViewport()) return null;
-
-  if (target.__dragToDismiss) {
-    target.__dragToDismiss.cleanup();
-  }
-
-  const DISMISS_THRESHOLD = 75;
-  const RESISTANCE_FACTOR = 0.6;
-  const SNAP_BACK_MS = 150;
-  let caretRestoreTimer = null;
-
-  const dragState = {
-    startY: 0,
-    currentY: 0,
-    isDragging: false,
-    initialHeight: 0,
-    canDismiss: true,
-  };
-
-  // Detect keyboard open on mobile
-  const KEYBOARD_THRESHOLD = 150;
-  const viewport = window.visualViewport;
-  const isKeyboardOpen = () =>
-    disableWhenKeyboardOpen &&
-    viewport &&
-    window.innerHeight - viewport.height > KEYBOARD_THRESHOLD;
-
-  const hasTextSelection = () => {
-    const selection = document.getSelection();
-    return selection !== null && !selection.isCollapsed;
-  };
-
-  const handleTouchStart = (e) => {
-    if (isKeyboardOpen()) return;
-    if (ignoreTouchTarget(e.target)) return;
-    if (hasTextSelection()) return;
-
-    clearTimeout(caretRestoreTimer);
-    dragState.startY = e.touches[0].clientY;
-    dragState.currentY = dragState.startY;
-    dragState.isDragging = true;
-    dragState.initialHeight = target.getBoundingClientRect().height;
-    // Only allow a downward drag to dismiss when the scrollable body is already
-    // at the top; otherwise this gesture belongs to the scroll area.
-    dragState.canDismiss = !scrollContainer || scrollContainer.scrollTop <= 0;
-    dragState.canStretch =
-      allowUpwardStretch &&
-      (!scrollContainer ||
-        scrollContainer.scrollHeight <= scrollContainer.clientHeight);
-
-    target.style.transition = "none";
-  };
-
-  const handleTouchMove = (e) => {
-    if (!dragState.isDragging) return;
-
-    // A selection that appears mid-gesture (long-press) switches to text selection.
-    if (hasTextSelection()) {
-      dragState.isDragging = false;
-      target.style.transform = "";
-      target.style.caretColor = "";
-      return;
-    }
-
-    dragState.currentY = e.touches[0].clientY;
-    const deltaY = dragState.currentY - dragState.startY;
-
-    if (deltaY > 0 && dragState.canDismiss) {
-      e.preventDefault();
-      const adjustedDelta = deltaY * RESISTANCE_FACTOR;
-      // Hide caret while dragging
-      target.style.caretColor = "transparent";
-      target.style.transform = `translateY(${adjustedDelta}px)`;
-    } else if (deltaY < 0 && dragState.canStretch) {
-      e.preventDefault();
-      const adjustedDelta = Math.abs(deltaY) * (RESISTANCE_FACTOR * 0.5);
-      target.style.height = `${dragState.initialHeight + adjustedDelta}px`;
-    } else if (scrollContainer && deltaY !== 0) {
-      dragState.isDragging = false;
-      target.style.transform = "";
-      target.style.caretColor = "";
-    } else {
-      e.preventDefault();
-    }
-  };
-
-  const handleTouchEnd = async () => {
-    if (!dragState.isDragging) return;
-
-    const deltaY = dragState.currentY - dragState.startY;
-    target.style.transition = allowUpwardStretch
-      ? `transform ${SNAP_BACK_MS}ms ease-out, height ${SNAP_BACK_MS}ms ease-out`
-      : `transform ${SNAP_BACK_MS}ms ease-out`;
-
-    if (deltaY > DISMISS_THRESHOLD && (await confirmDismiss())) {
-      target.style.transform = "translateY(100%)";
-      onClose();
-    } else {
-      target.style.transform = "";
-      if (dragState.canStretch) target.style.height = "";
-      caretRestoreTimer = setTimeout(() => {
-        target.style.caretColor = "";
-      }, SNAP_BACK_MS);
-    }
-
-    dragState.isDragging = false;
-  };
-
-  eventSource.addEventListener("touchstart", handleTouchStart, {
-    passive: false,
-  });
-  eventSource.addEventListener("touchmove", handleTouchMove, {
-    passive: false,
-  });
-  eventSource.addEventListener("touchend", handleTouchEnd);
-
-  dragState.cleanup = () => {
-    clearTimeout(caretRestoreTimer);
-    delete target.__dragToDismiss;
-    eventSource.removeEventListener("touchstart", handleTouchStart);
-    eventSource.removeEventListener("touchmove", handleTouchMove);
-    eventSource.removeEventListener("touchend", handleTouchEnd);
-    target.style.transform = "";
-    target.style.transition = "";
-    target.style.height = "";
-    target.style.caretColor = "";
-  };
-
-  target.__dragToDismiss = dragState;
-
-  return dragState;
-}
-
-// iOS Safari: dismissing the keyboard via the "Done" button leaves the
-// dialog's inner scroll area offset, which makes buttons unclickable
-// until the dialog is swiped or re-tapped. Reset scroll on text input blur.
-export function resetScrollOnBlur(dialog, scrollArea) {
-  dialog.addEventListener(
-    "blur",
-    (event) => {
-      if (
-        !event.target.matches?.('input, textarea, [contenteditable="true"]')
-      ) {
-        return;
-      }
-      if (scrollArea) scrollArea.scrollTop = 0;
-      window.scrollTo(0, 0);
-    },
-    true,
-  );
-}
-
 export class ImageLoader {
   constructor() {
     this._loaded = new Set();
diff --git a/tests/unit/specs/components/context-menu.test.js b/tests/unit/specs/components/context-menu.test.js
index ba12912b..14e7849f 100644
--- a/tests/unit/specs/components/context-menu.test.js
+++ b/tests/unit/specs/components/context-menu.test.js
@@ -104,40 +104,41 @@ describe("context-menu", () => {
   });
 
   describe("ContextMenu - close method", () => {
-    it("should set isOpen to false when close() is called", () => {
+    it("should set isOpen to false when close() is called", async () => {
       const element = document.createElement("context-menu");
       connectElement(element);
       element.open(100, 100);
-      element.close();
+      await element.close();
       assert.deepEqual(element.isOpen, false);
     });
 
-    it("should remove open class from container when close() is called", () => {
+    it("should remove open class from container when close() is called", async () => {
       const element = document.createElement("context-menu");
       connectElement(element);
       element.open(100, 100);
-      element.close();
+      await element.close();
       const container = element.querySelector(".context-menu-container");
       assert(!container.classList.contains("open"));
     });
 
-    it("should close the dialog when close() is called", () => {
+    it("should close the dialog when close() is called", async () => {
       const element = document.createElement("context-menu");
       connectElement(element);
       element.open(100, 100);
-      element.close();
+      await element.close();
       const dialog = element.querySelector(".context-menu");
       assert(!dialog.open);
     });
   });
 
   describe("ContextMenu - container click", () => {
-    it("should close menu when container is clicked", () => {
+    it("should close menu when container is clicked", async () => {
       const element = document.createElement("context-menu");
       connectElement(element);
       element.open(100, 100);
       const container = element.querySelector(".context-menu-container");
       container.click();
+      await Promise.resolve();
       assert.deepEqual(element.isOpen, false);
     });
   });
diff --git a/tests/unit/specs/components/drafts-dialog.test.js b/tests/unit/specs/components/drafts-dialog.test.js
index 66ad67b6..d4b8c9c5 100644
--- a/tests/unit/specs/components/drafts-dialog.test.js
+++ b/tests/unit/specs/components/drafts-dialog.test.js
@@ -314,25 +314,28 @@ describe("drafts-dialog", () => {
   });
 
   describe("DraftsDialog - selecting a draft", () => {
-    it("should close and dispatch draft-selected with the draft on click", () => {
+    it("should close and dispatch draft-selected with the draft on click", async () => {
       const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
       const draftView = createDraftView();
       seedDrafts($hydratedDrafts, [draftView]);
       const element = createDialog(dataLayer);
+      element.open();
       const events = [];
       element.addEventListener("dialog-closed", () => events.push("closed"));
       element.addEventListener("draft-selected", (event) =>
         events.push(event.detail.draftView),
       );
       element.querySelector('[data-testid="draft-item"]').click();
+      await flushMicrotasks();
       assert.deepEqual(events, ["closed", draftView]);
     });
 
-    it("should select the draft on Enter", () => {
+    it("should select the draft on Enter", async () => {
       const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
       const draftView = createDraftView();
       seedDrafts($hydratedDrafts, [draftView]);
       const element = createDialog(dataLayer);
+      element.open();
       let selected = null;
       element.addEventListener("draft-selected", (event) => {
         selected = event.detail.draftView;
@@ -342,6 +345,7 @@ describe("drafts-dialog", () => {
         .dispatchEvent(
           new window.KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
         );
+      await flushMicrotasks();
       assert.deepEqual(selected, draftView);
     });
   });
@@ -499,7 +503,7 @@ describe("drafts-dialog", () => {
   });
 
   describe("DraftsDialog - dismissal", () => {
-    it("should open the dialog as a modal and close on the back button", () => {
+    it("should open the dialog as a modal and close on the back button", async () => {
       const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
       seedDrafts($hydratedDrafts, []);
       const element = createDialog(dataLayer);
@@ -511,11 +515,12 @@ describe("drafts-dialog", () => {
         closed = true;
       });
       element.querySelector('[data-testid="drafts-dialog-back"]').click();
+      await flushMicrotasks();
       assert(closed);
       assert.deepEqual(dialog.open, false);
     });
 
-    it("should close on cancel (Escape)", () => {
+    it("should close on cancel (Escape)", async () => {
       const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
       seedDrafts($hydratedDrafts, []);
       const element = createDialog(dataLayer);
@@ -526,11 +531,12 @@ describe("drafts-dialog", () => {
       });
       const dialog = element.querySelector("dialog");
       dialog.dispatchEvent(new window.Event("cancel", { bubbles: false }));
+      await flushMicrotasks();
       assert(closed);
       assert.deepEqual(dialog.open, false);
     });
 
-    it("should close on a backdrop click but not on a click inside the sheet", () => {
+    it("should close on a backdrop click but not on a click inside the sheet", async () => {
       const { dataLayer, $hydratedDrafts } = createFakeDataLayer();
       seedDrafts($hydratedDrafts, []);
       const element = createDialog(dataLayer);
@@ -543,6 +549,7 @@ describe("drafts-dialog", () => {
       assert.deepEqual(closedCount, 0);
       const dialog = element.querySelector("dialog");
       dialog.dispatchEvent(new window.MouseEvent("click", { bubbles: false }));
+      await flushMicrotasks();
       assert.deepEqual(closedCount, 1);
       assert.deepEqual(dialog.open, false);
     });
diff --git a/tests/unit/specs/components/edit-profile-dialog.test.js b/tests/unit/specs/components/edit-profile-dialog.test.js
index 96221265..d324a19f 100644
--- a/tests/unit/specs/components/edit-profile-dialog.test.js
+++ b/tests/unit/specs/components/edit-profile-dialog.test.js
@@ -421,6 +421,7 @@ describe("edit-profile-dialog", () => {
       const element = document.createElement("edit-profile-dialog");
       connectElement(element);
       element.setProfile(mockProfile);
+      element.open();
 
       let closedEventFired = false;
       element.addEventListener("edit-profile-closed", () => {
@@ -465,6 +466,7 @@ describe("edit-profile-dialog", () => {
       const element = document.createElement("edit-profile-dialog");
       connectElement(element);
       element.setProfile(mockProfile);
+      element.open();
 
       const displayNameInput = element.querySelector(
         "[data-testid='edit-profile-display-name']",
diff --git a/tests/unit/specs/components/emoji-picker-dialog.test.js b/tests/unit/specs/components/emoji-picker-dialog.test.js
index 88a90c48..62dd6b66 100644
--- a/tests/unit/specs/components/emoji-picker-dialog.test.js
+++ b/tests/unit/specs/components/emoji-picker-dialog.test.js
@@ -42,11 +42,11 @@ describe("emoji-picker-dialog", () => {
       assert.deepEqual(element.querySelector("emoji-picker"), null);
     });
 
-    it("should remove the host dialog and flip isOpen on close()", () => {
+    it("should remove the host dialog and flip isOpen on close()", async () => {
       const element = document.createElement("emoji-picker-dialog");
       connectElement(element);
       element.open();
-      element.close();
+      await element.close();
       assert.deepEqual(element.isOpen, false);
       assert.deepEqual(getHostDialog(), null);
     });
@@ -89,13 +89,14 @@ describe("emoji-picker-dialog", () => {
   });
 
   describe("EmojiPickerDialog - backdrop click", () => {
-    it("should close when the host dialog itself is clicked (backdrop)", () => {
+    it("should close when the host dialog itself is clicked (backdrop)", async () => {
       const element = document.createElement("emoji-picker-dialog");
       connectElement(element);
       element.open();
 
       const host = getHostDialog();
       host.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
 
       assert.deepEqual(element.isOpen, false);
       assert.deepEqual(getHostDialog(), null);
@@ -115,13 +116,14 @@ describe("emoji-picker-dialog", () => {
   });
 
   describe("EmojiPickerDialog - disconnection cleanup", () => {
-    it("should close (remove host dialog, clear isOpen) when removed from the DOM", () => {
+    it("should close (remove host dialog, clear isOpen) when removed from the DOM", async () => {
       const element = document.createElement("emoji-picker-dialog");
       const container = connectElement(element);
       element.open();
       assert.deepEqual(element.isOpen, true);
 
       container.removeChild(element);
+      await Promise.resolve();
 
       assert.deepEqual(element.isOpen, false);
       assert.deepEqual(getHostDialog(), null);
diff --git a/tests/unit/specs/components/image-alt-text-dialog.test.js b/tests/unit/specs/components/image-alt-text-dialog.test.js
index f8c06493..48341a66 100644
--- a/tests/unit/specs/components/image-alt-text-dialog.test.js
+++ b/tests/unit/specs/components/image-alt-text-dialog.test.js
@@ -150,16 +150,16 @@ describe("image-alt-text-dialog", () => {
   });
 
   describe("ImageAltTextDialog - close method", () => {
-    it("should close the dialog when close() is called", () => {
+    it("should close the dialog when close() is called", async () => {
       const element = document.createElement("image-alt-text-dialog");
       connectElement(element);
       element.open();
-      element.close();
+      await element.close();
       const dialog = element.querySelector(".image-alt-text-dialog");
       assert(!dialog.open);
     });
 
-    it("should dispatch alt-text-dialog-closed event when close() is called", () => {
+    it("should dispatch alt-text-dialog-closed event when close() is called", async () => {
       const element = document.createElement("image-alt-text-dialog");
       connectElement(element);
       element.open();
@@ -169,7 +169,7 @@ describe("image-alt-text-dialog", () => {
         eventFired = true;
       });
 
-      element.close();
+      await element.close();
       assert(eventFired);
     });
   });
diff --git a/tests/unit/specs/components/new-chat-dialog.test.js b/tests/unit/specs/components/new-chat-dialog.test.js
index d41c4b41..9daf68eb 100644
--- a/tests/unit/specs/components/new-chat-dialog.test.js
+++ b/tests/unit/specs/components/new-chat-dialog.test.js
@@ -548,6 +548,7 @@ describe("new-chat-dialog", () => {
     it("should close, ensure the convo, and navigate on selecting a user", async () => {
       const { dataLayer, ensureCalls } = createFakeDataLayer();
       const element = createDialog(dataLayer);
+      element.open();
       let closed = false;
       element.addEventListener("dialog-closed", () => {
         closed = true;
@@ -561,8 +562,8 @@ describe("new-chat-dialog", () => {
       ]);
       await typeQuery(element, "alice");
       element.querySelector('[data-testid="new-chat-result"]').click();
-      assert(closed, "dialog-closed should fire before the convo loads");
       await flushMicrotasks();
+      assert(closed, "the dialog closes when a user is selected");
       assert.deepEqual(ensureCalls, ["did:plc:alice"]);
       assert.deepEqual(
         window.router.go.mock.calls.map((call) => call.arguments),
@@ -577,6 +578,7 @@ describe("new-chat-dialog", () => {
         ensureConvoForProfile: () => Promise.reject(blockedError),
       });
       const element = createDialog(dataLayer);
+      element.open();
       dataLayer.derived.$chatRecipientSearchResults.set([
         createProfile({
           did: "did:plc:alice",
@@ -603,6 +605,7 @@ describe("new-chat-dialog", () => {
           Promise.reject(new TypeError("Failed to fetch")),
       });
       const element = createDialog(dataLayer);
+      element.open();
       dataLayer.derived.$chatRecipientSearchResults.set([
         createProfile({
           did: "did:plc:alice",
@@ -624,6 +627,7 @@ describe("new-chat-dialog", () => {
           Promise.reject(new Error("Conversation not found")),
       });
       const element = createDialog(dataLayer);
+      element.open();
       dataLayer.derived.$chatRecipientSearchResults.set([
         createProfile({
           did: "did:plc:alice",
@@ -666,29 +670,51 @@ describe("new-chat-dialog", () => {
         element.querySelector(".new-chat-dialog").hasAttribute("autofocus"),
       );
     });
+
+    it("should reset scroll when the search input blurs", () => {
+      const { dataLayer } = createFakeDataLayer();
+      const element = createDialog(dataLayer);
+      element.open();
+
+      const results = element.querySelector(".new-chat-results");
+      const input = element.querySelector(
+        '[data-testid="new-chat-search-input"]',
+      );
+      results.scrollTop = 200;
+      window.scrollTo(0, 200);
+
+      input.dispatchEvent(new window.FocusEvent("blur", { bubbles: false }));
+
+      assert.equal(results.scrollTop, 0);
+      assert.equal(window.scrollY, 0);
+    });
   });
 
   describe("NewChatDialog - dismissal", () => {
-    it("should close on the close button", () => {
+    it("should close on the close button", async () => {
       const { dataLayer } = createFakeDataLayer();
       const element = createDialog(dataLayer);
       let closed = false;
       element.addEventListener("dialog-closed", () => {
         closed = true;
       });
+      element.open();
       element.querySelector('[data-testid="new-chat-dialog-close"]').click();
+      await flushMicrotasks();
       assert(closed);
     });
 
-    it("should close on cancel (Escape)", () => {
+    it("should close on cancel (Escape)", async () => {
       const { dataLayer } = createFakeDataLayer();
       const element = createDialog(dataLayer);
       let closed = false;
       element.addEventListener("dialog-closed", () => {
         closed = true;
       });
+      element.open();
       const dialog = element.querySelector("dialog.new-chat-dialog");
       dialog.dispatchEvent(new window.Event("cancel", { bubbles: false }));
+      await flushMicrotasks();
       assert(closed);
     });
   });
diff --git a/tests/unit/specs/components/post-composer.test.js b/tests/unit/specs/components/post-composer.test.js
index cceab4b6..d468f854 100644
--- a/tests/unit/specs/components/post-composer.test.js
+++ b/tests/unit/specs/components/post-composer.test.js
@@ -220,16 +220,16 @@ describe("post-composer", () => {
   });
 
   describe("PostComposer - close method", () => {
-    it("should close the dialog when close() is called", () => {
+    it("should close the dialog when close() is called", async () => {
       const element = createPostComposer();
       connectElement(element);
       element.open();
-      element.close();
+      await element.close();
       const dialog = element.querySelector(".post-composer");
       assert(!dialog.open);
     });
 
-    it("should dispatch post-composer-closed event when close() is called", () => {
+    it("should dispatch post-composer-closed event when close() is called", async () => {
       const element = createPostComposer();
       connectElement(element);
       element.open();
@@ -239,7 +239,7 @@ describe("post-composer", () => {
         eventFired = true;
       });
 
-      element.close();
+      await element.close();
       assert(eventFired);
     });
   });
@@ -2413,7 +2413,7 @@ describe("post-composer", () => {
   });
 
   describe("PostComposer - emoji picker", () => {
-    it("opens the emoji picker from the button and toggles it closed", () => {
+    it("opens the emoji picker from the button and toggles it closed", async () => {
       const element = createPostComposer();
       connectElement(element);
       const button = element.querySelector(".post-composer-emoji-button");
@@ -2421,10 +2421,11 @@ describe("post-composer", () => {
       button.click();
       assert.deepEqual(picker.isOpen, true);
       button.click();
+      await nextFrame();
       assert.deepEqual(picker.isOpen, false);
     });
 
-    it("inserts the selected emoji into the active input", () => {
+    it("inserts the selected emoji into the active input", async () => {
       const element = createPostComposer();
       connectElement(element);
       const richTextInput = element.querySelector("rich-text-input");
@@ -2434,6 +2435,7 @@ describe("post-composer", () => {
       picker.dispatchEvent(
         new CustomEvent("select", { detail: { emoji: "😀" } }),
       );
+      await nextFrame();
       assert(richTextInput.text.includes("😀"));
       assert.deepEqual(getFirstPost(element).text, richTextInput.text);
       assert.deepEqual(element._savedEmojiCursor, null);
@@ -2515,6 +2517,7 @@ describe("post-composer", () => {
       element.querySelector(".image-preview-item img").click();
       const dialog = document.body.querySelector("image-alt-text-dialog");
       dialog.querySelector('[data-testid="alt-text-close"]').click();
+      await nextFrame();
       assert.deepEqual(getFirstPost(element).images[0].alt, undefined);
       assert.deepEqual(
         document.body.querySelector("image-alt-text-dialog"),
@@ -2717,6 +2720,7 @@ describe("post-composer", () => {
       });
       await element.send();
       receivedDetail.successCallback();
+      await nextFrame();
       assert(!element.querySelector(".post-composer").open);
       assert(closedEventFired);
     });
diff --git a/tests/unit/specs/components/report-dialog.test.js b/tests/unit/specs/components/report-dialog.test.js
index f977be56..3ba95aea 100644
--- a/tests/unit/specs/components/report-dialog.test.js
+++ b/tests/unit/specs/components/report-dialog.test.js
@@ -237,16 +237,16 @@ describe("report-dialog", () => {
   });
 
   describe("ReportDialog - close method", () => {
-    it("should close the dialog when close() is called", () => {
+    it("should close the dialog when close() is called", async () => {
       const element = createReportDialog();
       connectElement(element);
       element.open();
-      element.close();
+      await element.close();
       const dialog = element.querySelector(".report-dialog");
       assert(!dialog.open);
     });
 
-    it("should dispatch report-dialog-closed event when close() is called", () => {
+    it("should dispatch report-dialog-closed event when close() is called", async () => {
       const element = createReportDialog();
       connectElement(element);
       element.open();
@@ -256,7 +256,7 @@ describe("report-dialog", () => {
         eventFired = true;
       });
 
-      element.close();
+      await element.close();
       assert(eventFired);
     });
   });
diff --git a/tests/unit/specs/dialogHelpers.test.js b/tests/unit/specs/dialogHelpers.test.js
new file mode 100644
index 00000000..0cad17f8
--- /dev/null
+++ b/tests/unit/specs/dialogHelpers.test.js
@@ -0,0 +1,335 @@
+import { describe, it, beforeEach, afterEach } from "node:test";
+import assert from "node:assert/strict";
+import {
+  closeWithAnimation,
+  enableDragToDismiss,
+  resetScrollOnBlur,
+} from "/js/dialogHelpers.js";
+import { wait } from "/js/utils.js";
+
+function pressEvent(
+  type,
+  { clientX = 0, clientY = 0, touch = false, button = 0 } = {},
+) {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  if (touch) {
+    event.touches = [{ clientX, clientY }];
+  } else {
+    event.clientX = clientX;
+    event.clientY = clientY;
+    event.button = button;
+  }
+  return event;
+}
+
+describe("closeWithAnimation", () => {
+  let dialog;
+
+  beforeEach(() => {
+    dialog = document.createElement("dialog");
+    document.body.appendChild(dialog);
+    dialog.showModal();
+  });
+
+  afterEach(() => {
+    dialog.remove();
+  });
+
+  const stubExitAnimation = () => {
+    const originalGetComputedStyle = globalThis.getComputedStyle;
+    globalThis.getComputedStyle = () => ({
+      animationDuration: "0.15s",
+      transitionDuration: "0s",
+    });
+    Object.defineProperty(dialog, "getAnimations", { value: () => [] });
+    return () => {
+      globalThis.getComputedStyle = originalGetComputedStyle;
+    };
+  };
+
+  it("returns a promise and closes when no exit animation runs", async () => {
+    const closing = closeWithAnimation(dialog);
+
+    assert(closing instanceof Promise);
+    await closing;
+    assert(!dialog.open);
+    assert(!dialog.hasAttribute("data-closing"));
+  });
+
+  it("keeps a dialog open until its exit animation ends", async () => {
+    const restore = stubExitAnimation();
+
+    try {
+      const closing = closeWithAnimation(dialog);
+      assert(dialog.open);
+      assert(dialog.hasAttribute("data-closing"));
+
+      dialog.dispatchEvent(new Event("animationend"));
+      await closing;
+      assert(!dialog.open);
+      assert(!dialog.hasAttribute("data-closing"));
+    } finally {
+      restore();
+    }
+  });
+
+  it("fires the native close event (teardown hook)", async () => {
+    let closeCount = 0;
+    dialog.addEventListener("close", () => closeCount++);
+
+    await closeWithAnimation(dialog);
+    assert.deepEqual(closeCount, 1);
+  });
+
+  it("holds the close event until the exit animation ends", async () => {
+    const restore = stubExitAnimation();
+    let closeCount = 0;
+    dialog.addEventListener("close", () => closeCount++);
+
+    try {
+      const closing = closeWithAnimation(dialog);
+      assert.deepEqual(closeCount, 0);
+      dialog.dispatchEvent(new Event("animationend"));
+      await closing;
+      assert.deepEqual(closeCount, 1);
+    } finally {
+      restore();
+    }
+  });
+
+  it("leaves an in-flight dismissal alone on a repeat call", async () => {
+    const restore = stubExitAnimation();
+
+    try {
+      const closing = closeWithAnimation(dialog);
+      assert(dialog.hasAttribute("data-closing"));
+
+      // A second call while data-closing is set must not close early or
+      // start a second animation.
+      await closeWithAnimation(dialog);
+      assert(dialog.open);
+      assert(dialog.hasAttribute("data-closing"));
+
+      dialog.dispatchEvent(new Event("animationend"));
+      await closing;
+      assert(!dialog.open);
+    } finally {
+      restore();
+    }
+  });
+
+  it("is a no-op on a dialog that is not open", async () => {
+    dialog.close();
+    let closeCount = 0;
+    dialog.addEventListener("close", () => closeCount++);
+
+    await closeWithAnimation(dialog);
+    assert.deepEqual(closeCount, 0);
+    assert(!dialog.hasAttribute("data-closing"));
+  });
+
+  it("does not touch the cancel event", () => {
+    const cancelEvent = new Event("cancel", { cancelable: true });
+    dialog.dispatchEvent(cancelEvent);
+
+    assert(!cancelEvent.defaultPrevented);
+    assert(dialog.open);
+  });
+});
+
+describe("enableDragToDismiss", () => {
+  let el;
+  let closeCount;
+  let dragState;
+  let originalMatchMedia;
+  let originalVisualViewport;
+
+  const setKeyboardOpen = (open) => {
+    window.visualViewport = {
+      height: open ? window.innerHeight - 300 : window.innerHeight,
+    };
+  };
+
+  const drag = async (deltaY) => {
+    el.dispatchEvent(pressEvent("touchstart", { touch: true, clientY: 100 }));
+    el.dispatchEvent(
+      pressEvent("touchmove", { touch: true, clientY: 100 + deltaY }),
+    );
+    el.dispatchEvent(pressEvent("touchend", { touch: true }));
+    await wait(0);
+  };
+
+  beforeEach(() => {
+    originalMatchMedia = window.matchMedia;
+    window.matchMedia = (query) => ({
+      matches: query === "(max-width: 799px)",
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    });
+    originalVisualViewport = window.visualViewport;
+    setKeyboardOpen(false);
+    el = document.createElement("div");
+    document.body.appendChild(el);
+    closeCount = 0;
+    dragState = null;
+  });
+
+  afterEach(() => {
+    dragState?.cleanup();
+    el.remove();
+    window.matchMedia = originalMatchMedia;
+    window.visualViewport = originalVisualViewport;
+  });
+
+  it("returns null on non-mobile viewports", () => {
+    window.matchMedia = originalMatchMedia;
+    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+    assert.deepEqual(dragState, null);
+  });
+
+  it("dismisses on a downward drag past the threshold", async () => {
+    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+    await drag(150);
+    assert.deepEqual(closeCount, 1);
+  });
+
+  it("does not dismiss on a drag below the threshold", async () => {
+    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+    await drag(50);
+    assert.deepEqual(closeCount, 0);
+  });
+
+  it("dismisses while the keyboard is open by default", async () => {
+    setKeyboardOpen(true);
+    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+    await drag(150);
+    assert.deepEqual(closeCount, 1);
+  });
+
+  it("ignores drags while the keyboard is open when disableWhenKeyboardOpen is true", async () => {
+    setKeyboardOpen(true);
+    dragState = enableDragToDismiss(el, {
+      onClose: () => closeCount++,
+      disableWhenKeyboardOpen: true,
+    });
+    await drag(150);
+    assert.deepEqual(closeCount, 0);
+    assert.deepEqual(el.style.transform, "");
+  });
+
+  it("hides the caret while the sheet is displaced", () => {
+    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+    el.dispatchEvent(pressEvent("touchstart", { touch: true, clientY: 100 }));
+    el.dispatchEvent(pressEvent("touchmove", { touch: true, clientY: 150 }));
+    assert.deepEqual(el.style.caretColor, "transparent");
+  });
+
+  it("restores the caret only after the snap-back transition lands", async () => {
+    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+    await drag(50);
+    assert.deepEqual(el.style.caretColor, "transparent");
+    await wait(200);
+    assert.deepEqual(el.style.caretColor, "");
+  });
+
+  it("keeps the caret hidden through a dismiss", async () => {
+    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+    await drag(150);
+    assert.deepEqual(el.style.caretColor, "transparent");
+  });
+
+  it("restores the caret on cleanup", async () => {
+    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+    await drag(150);
+    dragState.cleanup();
+    assert.deepEqual(el.style.caretColor, "");
+  });
+
+  describe("with text selected", () => {
+    beforeEach(() => {
+      el.textContent = "some selectable text";
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      const selection = document.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    });
+
+    afterEach(() => {
+      document.getSelection().removeAllRanges();
+    });
+
+    it("ignores drags that start while text is selected", async () => {
+      dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+      await drag(150);
+      assert.deepEqual(closeCount, 0);
+      assert.deepEqual(el.style.transform, "");
+    });
+
+    it("abandons a drag when a selection appears mid-gesture", async () => {
+      dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
+      document.getSelection().removeAllRanges();
+      el.dispatchEvent(pressEvent("touchstart", { touch: true, clientY: 100 }));
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      document.getSelection().addRange(range);
+      el.dispatchEvent(pressEvent("touchmove", { touch: true, clientY: 250 }));
+      el.dispatchEvent(pressEvent("touchend", { touch: true }));
+      await wait(0);
+      assert.deepEqual(closeCount, 0);
+      assert.deepEqual(el.style.transform, "");
+    });
+  });
+});
+
+describe("resetScrollOnBlur", () => {
+  let dialog;
+  let scrollArea;
+
+  const blurFrom = (element) => {
+    element.dispatchEvent(new window.FocusEvent("blur"));
+  };
+
+  beforeEach(() => {
+    dialog = document.createElement("dialog");
+    scrollArea = document.createElement("div");
+    dialog.appendChild(scrollArea);
+    document.body.appendChild(dialog);
+    resetScrollOnBlur(dialog, scrollArea);
+    scrollArea.scrollTop = 42;
+  });
+
+  afterEach(() => {
+    dialog.remove();
+  });
+
+  it("resets the scroll area when a textarea blurs", () => {
+    const textarea = document.createElement("textarea");
+    scrollArea.appendChild(textarea);
+    blurFrom(textarea);
+    assert.deepEqual(scrollArea.scrollTop, 0);
+  });
+
+  it("resets the scroll area when an input blurs", () => {
+    const input = document.createElement("input");
+    scrollArea.appendChild(input);
+    blurFrom(input);
+    assert.deepEqual(scrollArea.scrollTop, 0);
+  });
+
+  it("resets the scroll area when a contenteditable element blurs", () => {
+    const editable = document.createElement("div");
+    editable.setAttribute("contenteditable", "true");
+    scrollArea.appendChild(editable);
+    blurFrom(editable);
+    assert.deepEqual(scrollArea.scrollTop, 0);
+  });
+
+  it("does not reset scroll when a button blurs", () => {
+    const button = document.createElement("button");
+    scrollArea.appendChild(button);
+    blurFrom(button);
+    assert.deepEqual(scrollArea.scrollTop, 42);
+  });
+});
diff --git a/tests/unit/specs/plugins/pluginModal.test.js b/tests/unit/specs/plugins/pluginModal.test.js
index dc7fc0a3..9868f79f 100644
--- a/tests/unit/specs/plugins/pluginModal.test.js
+++ b/tests/unit/specs/plugins/pluginModal.test.js
@@ -95,7 +95,7 @@ describe("showPluginModal", () => {
     assert.deepEqual(body.textContent, "Single body");
   });
 
-  it("should reuse the existing dialog and replace its content on a second call", () => {
+  it("should reuse the existing dialog and replace its content on a second call", async () => {
     clearDOM();
     const pluginId = "reuse.plugin";
     const modalId = uniqueModalId("reuse");
@@ -112,6 +112,7 @@ describe("showPluginModal", () => {
       title: { tag: "span", text: "Second Title" },
       content: { tag: "p", text: "Second body" },
     });
+    await new Promise((resolve) => setTimeout(resolve, 0));
     const dialogs = document.querySelectorAll("dialog.plugin-modal");
     assert.deepEqual(dialogs.length, 1);
     const title = document.querySelector(".modal-dialog-title");
@@ -142,7 +143,7 @@ describe("showPluginModal", () => {
     hidePluginModal({ pluginId, modalId });
   });
 
-  it("should invoke onDismiss when dismissed via backdrop click", () => {
+  it("should invoke onDismiss when dismissed via backdrop click", async () => {
     clearDOM();
     const onDismiss = mock.fn();
     showPluginModal({
@@ -154,11 +155,12 @@ describe("showPluginModal", () => {
     });
     const dialog = document.querySelector("dialog.plugin-modal");
     dialog.dispatchEvent(new Event("click", { bubbles: true }));
+    await Promise.resolve();
     assert(!dialog.hasAttribute("open"));
     assert.deepEqual(onDismiss.mock.callCount(), 1);
   });
 
-  it("should invoke onDismiss when dismissed via cancel event", () => {
+  it("should invoke onDismiss when dismissed via cancel event", async () => {
     clearDOM();
     const onDismiss = mock.fn();
     showPluginModal({
@@ -172,6 +174,7 @@ describe("showPluginModal", () => {
     const cancelEvent = new Event("cancel");
     cancelEvent.preventDefault = () => {};
     dialog.dispatchEvent(cancelEvent);
+    await Promise.resolve();
     assert(!dialog.hasAttribute("open"));
     assert.deepEqual(onDismiss.mock.callCount(), 1);
   });
diff --git a/tests/unit/specs/utils.test.js b/tests/unit/specs/utils.test.js
index 855b2cea..806ea585 100644
--- a/tests/unit/specs/utils.test.js
+++ b/tests/unit/specs/utils.test.js
@@ -22,9 +22,7 @@ import {
   withTimeout,
   wait,
   enableLongPress,
-  enableDragToDismiss,
   TimeoutError,
-  resetScrollOnBlur,
   pinScrollPosition,
 } from "/js/utils.js";
 
@@ -1060,203 +1058,6 @@ describe("enableLongPress - context menu", () => {
   });
 });
 
-describe("enableDragToDismiss", () => {
-  let el;
-  let closeCount;
-  let dragState;
-  let originalMatchMedia;
-  let originalVisualViewport;
-
-  const setKeyboardOpen = (open) => {
-    window.visualViewport = {
-      height: open ? window.innerHeight - 300 : window.innerHeight,
-    };
-  };
-
-  const drag = async (deltaY) => {
-    el.dispatchEvent(pressEvent("touchstart", { touch: true, clientY: 100 }));
-    el.dispatchEvent(
-      pressEvent("touchmove", { touch: true, clientY: 100 + deltaY }),
-    );
-    el.dispatchEvent(pressEvent("touchend", { touch: true }));
-    await wait(0);
-  };
-
-  beforeEach(() => {
-    originalMatchMedia = window.matchMedia;
-    window.matchMedia = (query) => ({
-      matches: query === "(max-width: 799px)",
-      media: query,
-      addEventListener: () => {},
-      removeEventListener: () => {},
-    });
-    originalVisualViewport = window.visualViewport;
-    setKeyboardOpen(false);
-    el = document.createElement("div");
-    document.body.appendChild(el);
-    closeCount = 0;
-    dragState = null;
-  });
-
-  afterEach(() => {
-    dragState?.cleanup();
-    el.remove();
-    window.matchMedia = originalMatchMedia;
-    window.visualViewport = originalVisualViewport;
-  });
-
-  it("returns null on non-mobile viewports", () => {
-    window.matchMedia = originalMatchMedia;
-    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-    assert.deepEqual(dragState, null);
-  });
-
-  it("dismisses on a downward drag past the threshold", async () => {
-    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-    await drag(150);
-    assert.deepEqual(closeCount, 1);
-  });
-
-  it("does not dismiss on a drag below the threshold", async () => {
-    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-    await drag(50);
-    assert.deepEqual(closeCount, 0);
-  });
-
-  it("dismisses while the keyboard is open by default", async () => {
-    setKeyboardOpen(true);
-    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-    await drag(150);
-    assert.deepEqual(closeCount, 1);
-  });
-
-  it("ignores drags while the keyboard is open when disableWhenKeyboardOpen is true", async () => {
-    setKeyboardOpen(true);
-    dragState = enableDragToDismiss(el, {
-      onClose: () => closeCount++,
-      disableWhenKeyboardOpen: true,
-    });
-    await drag(150);
-    assert.deepEqual(closeCount, 0);
-    assert.deepEqual(el.style.transform, "");
-  });
-
-  it("hides the caret while the sheet is displaced", () => {
-    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-    el.dispatchEvent(pressEvent("touchstart", { touch: true, clientY: 100 }));
-    el.dispatchEvent(pressEvent("touchmove", { touch: true, clientY: 150 }));
-    assert.deepEqual(el.style.caretColor, "transparent");
-  });
-
-  it("restores the caret only after the snap-back transition lands", async () => {
-    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-    await drag(50);
-    assert.deepEqual(el.style.caretColor, "transparent");
-    await wait(200);
-    assert.deepEqual(el.style.caretColor, "");
-  });
-
-  it("keeps the caret hidden through a dismiss", async () => {
-    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-    await drag(150);
-    assert.deepEqual(el.style.caretColor, "transparent");
-  });
-
-  it("restores the caret on cleanup", async () => {
-    dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-    await drag(150);
-    dragState.cleanup();
-    assert.deepEqual(el.style.caretColor, "");
-  });
-
-  describe("with text selected", () => {
-    beforeEach(() => {
-      el.textContent = "some selectable text";
-      const range = document.createRange();
-      range.selectNodeContents(el);
-      const selection = document.getSelection();
-      selection.removeAllRanges();
-      selection.addRange(range);
-    });
-
-    afterEach(() => {
-      document.getSelection().removeAllRanges();
-    });
-
-    it("ignores drags that start while text is selected", async () => {
-      dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-      await drag(150);
-      assert.deepEqual(closeCount, 0);
-      assert.deepEqual(el.style.transform, "");
-    });
-
-    it("abandons a drag when a selection appears mid-gesture", async () => {
-      dragState = enableDragToDismiss(el, { onClose: () => closeCount++ });
-      document.getSelection().removeAllRanges();
-      el.dispatchEvent(pressEvent("touchstart", { touch: true, clientY: 100 }));
-      const range = document.createRange();
-      range.selectNodeContents(el);
-      document.getSelection().addRange(range);
-      el.dispatchEvent(pressEvent("touchmove", { touch: true, clientY: 250 }));
-      el.dispatchEvent(pressEvent("touchend", { touch: true }));
-      await wait(0);
-      assert.deepEqual(closeCount, 0);
-      assert.deepEqual(el.style.transform, "");
-    });
-  });
-});
-
-describe("resetScrollOnBlur", () => {
-  let dialog;
-  let scrollArea;
-
-  const blurFrom = (element) => {
-    element.dispatchEvent(new window.FocusEvent("blur"));
-  };
-
-  beforeEach(() => {
-    dialog = document.createElement("dialog");
-    scrollArea = document.createElement("div");
-    dialog.appendChild(scrollArea);
-    document.body.appendChild(dialog);
-    resetScrollOnBlur(dialog, scrollArea);
-    scrollArea.scrollTop = 42;
-  });
-
-  afterEach(() => {
-    dialog.remove();
-  });
-
-  it("resets the scroll area when a textarea blurs", () => {
-    const textarea = document.createElement("textarea");
-    scrollArea.appendChild(textarea);
-    blurFrom(textarea);
-    assert.deepEqual(scrollArea.scrollTop, 0);
-  });
-
-  it("resets the scroll area when an input blurs", () => {
-    const input = document.createElement("input");
-    scrollArea.appendChild(input);
-    blurFrom(input);
-    assert.deepEqual(scrollArea.scrollTop, 0);
-  });
-
-  it("resets the scroll area when a contenteditable element blurs", () => {
-    const editable = document.createElement("div");
-    editable.setAttribute("contenteditable", "true");
-    scrollArea.appendChild(editable);
-    blurFrom(editable);
-    assert.deepEqual(scrollArea.scrollTop, 0);
-  });
-
-  it("does not reset scroll when a button blurs", () => {
-    const button = document.createElement("button");
-    scrollArea.appendChild(button);
-    blurFrom(button);
-    assert.deepEqual(scrollArea.scrollTop, 42);
-  });
-});
-
 describe("pinScrollPosition", () => {
   let activeStops;
   let scroller;