fix(UsersStack): make counter width adaptive (#8066)

* fix(UsersStack): make counter width adaptive

* fix: add screenshots

* test: update screenshots

* fix: remove unused selectors

packages/vkui/src/components/UsersStack/UsersStack.e2e-playground.tsx

@@ -39,6 +39,12 @@ export const UsersStackPlayground = (props: ComponentPlaygroundProps) => {
             [base64Image, base64Image, base64Image, base64Image],
           ],
         },
+        {
+          children: [undefined],
+          size: ['m', 'l'],
+          photos: [[base64Image, base64Image, base64Image]],
+          count: [99],
+        },
       ]}
     >
       {(props: UsersStackProps) => <UsersStack {...props} />}

packages/vkui/src/components/UsersStack/UsersStack.module.css

@@ -2,6 +2,20 @@
   display: flex;
   align-items: center;
   color: var(--vkui--color_text_secondary);
+
+  --vkui_internal--UsersStack_item_size: 16px;
+}
+
+.sizeS {
+  --vkui_internal--UsersStack_item_size: 16px;
+}
+
+.sizeM {
+  --vkui_internal--UsersStack_item_size: 24px;
+}
+
+.sizeL {
+  --vkui_internal--UsersStack_item_size: 32px;
 }
 
 .avatarsPositionInlineEnd {
@@ -21,28 +35,24 @@
   fill: var(--vkui--color_image_placeholder_alpha);
 }
 
-.photoOthers {
+.item {
+  block-size: var(--vkui_internal--UsersStack_item_size);
+  min-inline-size: var(--vkui_internal--UsersStack_item_size);
+}
+
+.photo {
+  max-inline-size: var(--vkui_internal--UsersStack_item_size);
+}
+
+.counter {
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--vkui--spacing_size_xs);
   color: var(--vkui--color_text_contrast_themed);
   background: var(--vkui--color_icon_secondary);
-  border-radius: 50%;
-}
-
-.sizeS .photo {
-  inline-size: 16px;
-  block-size: 16px;
-}
-
-.sizeM .photo {
-  inline-size: 24px;
-  block-size: 24px;
-}
-
-.sizeL .photo {
-  inline-size: 32px;
-  block-size: 32px;
+  border-radius: calc(var(--vkui_internal--UsersStack_item_size) / 2);
 }
 
 .photoWrapper {

packages/vkui/src/components/UsersStack/UsersStack.tsx

@@ -168,7 +168,12 @@ export const UsersStack = ({
     const photoSrc = isPhotoType ? photo.src : photo;
 
     let photoElement = (
-      <svg xmlns="http://www.w3.org/2000/svg" className={styles.photo} aria-hidden display="block">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={classNames(styles.photo, styles.item)}
+        aria-hidden
+        display="block"
+      >
         <defs>
           <PathElement id={id} direction={direction} photoSize={photoSize} />
         </defs>
@@ -198,7 +203,7 @@ export const UsersStack = ({
 
   const othersElement = canShowOthers ? (
     <div className={styles.photoWrapper}>
-      <CounterTypography caps weight="1" className={classNames(styles.photo, styles.photoOthers)}>
+      <CounterTypography caps weight="1" className={classNames(styles.item, styles.counter)}>
         +{count}
       </CounterTypography>
     </div>