From 1f923a89ef61ecf0e0a45ad4d97c430fc948ff63 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Sun, 5 Jul 2026 08:35:16 +0100
Subject: [PATCH] Clip the sidebar shimmer wash to the chat name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The glyph overlay clips to text by construction, but the new highlight
wash is a box on the span — and the span is flex-1, so short names
swept a full-row highlight. The shimmer now lives on an inner
inline-block sized to the text (self-truncating, so the overlay
ellipsis stays aligned); the outer span keeps the row layout.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/features/chats/ui/ChatListItem.tsx    | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/desktop/src/features/chats/ui/ChatListItem.tsx b/desktop/src/features/chats/ui/ChatListItem.tsx
index 7b0bcd3ba8..71d8b5df6a 100644
--- a/desktop/src/features/chats/ui/ChatListItem.tsx
+++ b/desktop/src/features/chats/ui/ChatListItem.tsx
@@ -82,17 +82,20 @@ export function ChatListItem({
         onClick={() => onSelectChat(chat.id)}
         type="button"
       >
-        <span
-          className={cn(
-            "min-w-0 flex-1 truncate font-medium",
-            // Shimmer class + overlay live on the truncating span itself
-            // (same pattern as MarkerLabel) so long names keep their
-            // ellipsis while the band sweeps the visible text.
-            isAgentRunning && "buzz-shimmer buzz-shimmer-accent",
-          )}
-          data-shimmer-text={isAgentRunning ? name : undefined}
-        >
-          {name}
+        <span className="min-w-0 flex-1 truncate font-medium">
+          {/* Shimmer lives on an inner inline-block sized to the TEXT (the
+              outer span is flex-1 = full row, and the highlight wash would
+              otherwise sweep the whole row). The inner truncates itself so
+              the overlay's ellipsis stays aligned with the visible text. */}
+          <span
+            className={cn(
+              "max-w-full truncate align-bottom",
+              isAgentRunning && "buzz-shimmer buzz-shimmer-accent inline-block",
+            )}
+            data-shimmer-text={isAgentRunning ? name : undefined}
+          >
+            {name}
+          </span>
         </span>
         {isPinned ? (
           <Pin