diff --git a/.changeset/fresh-ideas-worry.md b/.changeset/fresh-ideas-worry.md new file mode 100644 index 00000000000..978ad0f3640 --- /dev/null +++ b/.changeset/fresh-ideas-worry.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Update `AvatarStack` to not reserve space when collapsed diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 3eedffd65da..b14542b02ab 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -241,6 +241,7 @@ } &:nth-child(n + 6) { + position: absolute; visibility: hidden; opacity: 0; } @@ -251,8 +252,9 @@ width: auto; .AvatarItem { - --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */ + --mask-size: 100%; /* reset size of the mask to prevent unintentionally clipping due to the additional size created by the border width */ + position: relative; margin-inline-start: var(--base-size-4); visibility: visible; opacity: 1;