From 83d577dc344e2f1be10f3a11dd49890e2bdc881c Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Sat, 4 Jul 2026 15:14:49 +0100
Subject: [PATCH] Ellipsize the shimmer overlay and center the stop icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shimmer ::before repeats the full data-shimmer-text, so on
truncating labels it painted the clipped characters over the base
text's ellipsis. The overlay now truncates identically (same font and
box, so the ellipsis lands in the same spot).

The stop square sized its svg directly, which competed with the
button's [&_svg]:size-4 rule and sat the glyph off-center — the size
override now lives on the button so class merge resolves it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/features/messages/ui/MessageComposerToolbar.tsx    | 7 +++++--
 desktop/src/shared/styles/globals/animations.css           | 7 +++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/desktop/src/features/messages/ui/MessageComposerToolbar.tsx b/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
index 6d03805c6..f7efac52c 100644
--- a/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
+++ b/desktop/src/features/messages/ui/MessageComposerToolbar.tsx
@@ -322,13 +322,16 @@ export const MessageComposerToolbar = React.memo(
           {onStopAgent && !isSending ? (
             <Button
               aria-label="Stop agent"
-              className="rounded-full"
+              // Icon size set here so it wins the base [&_svg]:size-4 via
+              // class merge — sizing the svg directly leaves both rules
+              // competing and the glyph off-center.
+              className="rounded-full [&_svg]:size-3.5"
               data-testid="stop-agent"
               onClick={onStopAgent}
               size="icon"
               type="button"
             >
-              <Square aria-hidden className="h-3.5 w-3.5 fill-current" />
+              <Square aria-hidden className="fill-current" />
             </Button>
           ) : (
             <Button
diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css
index db61cf356..1befca1fd 100644
--- a/desktop/src/shared/styles/globals/animations.css
+++ b/desktop/src/shared/styles/globals/animations.css
@@ -165,6 +165,13 @@
 .buzz-shimmer::before,
 .shimmer::before {
   animation: buzz-shimmer var(--buzz-shimmer-duration) linear infinite;
+  /* Truncate exactly like the base text: the overlay repeats the FULL
+     data-shimmer-text, and without its own ellipsis it paints the clipped
+     characters right over the base ellipsis on truncating labels (sidebar
+     titles). Same font + box → the ellipsis lands in the same spot. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   background-clip: text;
   background-image: linear-gradient(
     90deg,