Ellipsize the shimmer overlay and center the stop icon

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>
This commit is contained in:
klopez4212
2026-07-07 07:51:24 +01:00
co-authored by Claude Fable 5
parent e369ad801e
commit 83d577dc34
2 changed files with 12 additions and 2 deletions
@@ -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
@@ -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,