mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
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:
co-authored by
Claude Fable 5
parent
e369ad801e
commit
83d577dc34
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user