[Bug]: Label - celebration animation is broken is small size

[talkor]

Vibe version

^3.0.0

Describe the bug

When using the Label components with the celebrationAnimation and size="small" and when the animation is triggered,
the animated lines are getting wrong dimensions and are overflowing.
https://github.com/user-attachments/assets/337ee7a6-7479-4e3e-a3a9-9daffa05b694

Screen.Recording.2025-09-29.at.11.15.27.mp4

Expected behavior

The animated lines and border radiuses should match the border of the Label.

Steps to reproduce

() => {
  const [animate, setAnimate] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setAnimate(false);
    }, 500);
  }, [animate]);
  return (
    <>
      <Label
        id="celebration-label"
        text="New"
        size="small"
        kind="line"
        celebrationAnimation={animate}
      />
      <Button
        id="celebration-button"
        ariaLabel="Trigger celebration animation"
        size="small"
        kind="tertiary"
        onClick={() => setAnimate(true)}
      >
        Click to celebrate
      </Button>
    </>
  );
}

Reproduction example link

No response

System Info

Additional context, Screenshots

No response

[Asymtode712]

@talkor I would like to work on this issue, please assign it to me

[talkor]

@talkor I would like to work on this issue, please assign it to me

Awesome! Feel free to jump in and open a PR 🚀. We usually don’t assign issues ahead of time, since we don’t want to block or hold them. If you’d like to work on something, just go ahead and start - contributions are always welcome!