From b30bb4dcdd11f9cadd2734831a90995dd097c963 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 18 Mar 2026 15:33:40 +0100
Subject: [PATCH] fix: ProgressBar indeterminate animation and AvatarGroup key
 collision

- Use translateX instead of left for indeterminate shimmer (left doesn't
  work on non-absolutely-positioned elements)
- Use index-based key in AvatarGroup to prevent duplicate name collisions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/design-system/composites/AvatarGroup/AvatarGroup.tsx   | 2 +-
 .../primitives/ProgressBar/ProgressBar.module.css          | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/design-system/composites/AvatarGroup/AvatarGroup.tsx b/src/design-system/composites/AvatarGroup/AvatarGroup.tsx
index 52cef01..c6349ad 100644
--- a/src/design-system/composites/AvatarGroup/AvatarGroup.tsx
+++ b/src/design-system/composites/AvatarGroup/AvatarGroup.tsx
@@ -16,7 +16,7 @@ export function AvatarGroup({ names, max = 3, size = 'md', className }: AvatarGr
     <span className={`${styles.group} ${styles[size]} ${className ?? ''}`}>
       {visible.map((name, index) => (
         <Avatar
-          key={name}
+          key={`${name}-${index}`}
           name={name}
           size={size}
           className={`${styles.avatar} ${index === 0 ? styles.first : ''}`}
diff --git a/src/design-system/primitives/ProgressBar/ProgressBar.module.css b/src/design-system/primitives/ProgressBar/ProgressBar.module.css
index 09731dd..31b5c24 100644
--- a/src/design-system/primitives/ProgressBar/ProgressBar.module.css
+++ b/src/design-system/primitives/ProgressBar/ProgressBar.module.css
@@ -36,13 +36,12 @@
 
 /* Indeterminate shimmer */
 @keyframes shimmer {
-  0%   { left: -40%; width: 40%; }
-  50%  { left: 30%; width: 60%; }
-  100% { left: 100%; width: 40%; }
+  0%   { transform: translateX(-100%); width: 40%; }
+  50%  { transform: translateX(75%); width: 60%; }
+  100% { transform: translateX(250%); width: 40%; }
 }
 
 .indeterminate {
-  position: relative;
   width: 40% !important;
   animation: shimmer 1.4s ease-in-out infinite;
 }