From c9b7f3a3816c8bb5fd0c24a36a29878afedae82c Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Mon, 18 May 2026 08:25:59 -0400
Subject: [PATCH] fix(desktop): loosen inbox selected message highlight

Render the temporary inbox focus highlight as an expanded background layer so it has breathing room without shifting message layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/features/home/ui/InboxMessageRow.tsx  | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/desktop/src/features/home/ui/InboxMessageRow.tsx b/desktop/src/features/home/ui/InboxMessageRow.tsx
index f463d22494..efbdb3728e 100644
--- a/desktop/src/features/home/ui/InboxMessageRow.tsx
+++ b/desktop/src/features/home/ui/InboxMessageRow.tsx
@@ -63,14 +63,8 @@ export function InboxMessageRow({
     <div className="px-6 py-2">
       <article
         className={cn(
-          "group/message relative flex items-start gap-2.5 px-2 py-1 transition-colors duration-1000",
-          message.isSelected
-            ? cn(
-                isFocusHighlightVisible
-                  ? "bg-primary/[0.07]"
-                  : "bg-transparent",
-              )
-            : "hover:bg-muted/20",
+          "group/message relative flex items-start gap-2.5 px-2 py-1",
+          !message.isSelected && "hover:bg-muted/20",
         )}
         data-testid={
           message.isSelected
@@ -78,6 +72,18 @@ export function InboxMessageRow({
             : "home-inbox-context-message"
         }
       >
+        {message.isSelected ? (
+          <div
+            aria-hidden="true"
+            className={cn(
+              "pointer-events-none absolute -inset-x-2 -inset-y-1 rounded-xl transition-opacity duration-1000",
+              isFocusHighlightVisible
+                ? "bg-primary/[0.07] opacity-100"
+                : "bg-primary/[0.07] opacity-0",
+            )}
+          />
+        ) : null}
+
         {canReply || canToggleReactions ? (
           <div className="absolute right-2 top-1 z-10">
             <MessageActionBar