From e6e510b2ad271f5987799775a641a57e85a66d31 Mon Sep 17 00:00:00 2001
From: Phillip Carter <pcarter@fastmail.com>
Date: Fri, 24 Jul 2026 11:21:47 -0700
Subject: [PATCH] fix UI glitch when selecting things

---
 src/components/EmailListPanel.tsx | 12 +++++++++---
 tests/smoke/mail.spec.ts          |  6 ++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/EmailListPanel.tsx b/src/components/EmailListPanel.tsx
index a3c5134..2fc03fb 100644
--- a/src/components/EmailListPanel.tsx
+++ b/src/components/EmailListPanel.tsx
@@ -1267,6 +1267,8 @@ export default function EmailListPanel({
                 thread.allEmails.some((email) =>
                   isEmailUnread(email, clientReadIds, clientUnreadIds)
                 ) && !isRouteSelected;
+              const swipeOffset = swipeOffsets[thread.threadId] ?? 0;
+              const isSwipeActionVisible = swipeOffset !== 0;
 
               const showPinnedDivider =
                 !isInSearchMode && view === "inbox" && pinnedThreadCount > 0 && idx === 0;
@@ -1302,7 +1304,11 @@ export default function EmailListPanel({
                     className="relative overflow-hidden border-b border-stone-100 dark:border-stone-800"
                   >
                     <div
-                      className="pointer-events-none absolute inset-0 flex items-stretch justify-between text-xs font-semibold text-white"
+                      className={[
+                        "pointer-events-none absolute inset-0 flex items-stretch justify-between text-xs font-semibold text-white transition-opacity duration-75",
+                        isSwipeActionVisible ? "opacity-100" : "opacity-0",
+                      ].join(" ")}
+                      data-swipe-actions={thread.threadId}
                       aria-hidden="true"
                     >
                       <div
@@ -1338,9 +1344,9 @@ export default function EmailListPanel({
                             : "bg-stone-50 hover:bg-stone-100 dark:bg-stone-900 dark:hover:bg-stone-950",
                       ].join(" ")}
                       style={{
-                        transform: `translateX(${swipeOffsets[thread.threadId] ?? 0}px)`,
+                        transform: `translateX(${swipeOffset}px)`,
                         transition:
-                          (swipeOffsets[thread.threadId] ?? 0) === 0
+                          swipeOffset === 0
                             ? "transform 160ms ease-out"
                             : "none",
                       }}
diff --git a/tests/smoke/mail.spec.ts b/tests/smoke/mail.spec.ts
index 066d76c..e8802d2 100644
--- a/tests/smoke/mail.spec.ts
+++ b/tests/smoke/mail.spec.ts
@@ -32,11 +32,17 @@ test("moves through conversations with the keyboard", async ({ page }) => {
   const announcement = page.locator(
     '[aria-live="polite"][aria-atomic="true"]',
   );
+  const firstRowSwipeActions = page.locator(
+    '[data-swipe-actions="thread-maya"]',
+  );
+
+  await expect(firstRowSwipeActions).toHaveCSS("opacity", "0");
 
   await page.keyboard.press("j");
   await expect(announcement).toHaveText(
     "Selected conversation: Quarterly plan",
   );
+  await expect(firstRowSwipeActions).toHaveCSS("opacity", "0");
 
   await page.keyboard.press("j");
   await expect(announcement).toHaveText(
-- 
2.51.2