fix: group avatars by long group names in sidebar

changelog/unreleased/bugfix-oc-avatar-item-width-shrinking

@@ -0,0 +1,6 @@
+Bugfix: Remove width shrinking of the ocAvatarItem
+
+We fixed an issue that the width of ocAvatarItem is shrinking in the sidebar of web by longer group names
+
+https://github.com/owncloud/owncloud-design-system/issues/2241
+https://github.com/owncloud/owncloud-design-system/pull/2242

src/components/atoms/OcAvatarItem/OcAvatarItem.vue

@@ -1,15 +1,22 @@
 <template>
-  <span
-    class="oc-avatar-item"
-    :style="{ backgroundColor: backgroundColor, '--icon-color': iconColor, '--width': avatarWidth }"
+  <div
+    :data-test-item-name="name"
     :aria-label="accessibleLabel === '' ? null : accessibleLabel"
     :aria-hidden="accessibleLabel === '' ? 'true' : null"
     :focusable="accessibleLabel === '' ? 'false' : null"
     :role="accessibleLabel === '' ? null : 'img'"
-    :data-test-item-name="name"
   >
-    <oc-icon v-if="hasIcon" :name="icon" :size="iconSize" :fill-type="iconFillType" />
-  </span>
+    <span
+      class="oc-avatar-item"
+      :style="{
+        backgroundColor: backgroundColor,
+        '--icon-color': iconColor,
+        '--width': avatarWidth,
+      }"
+    >
+      <oc-icon v-if="hasIcon" :name="icon" :size="iconSize" :fill-type="iconFillType" />
+    </span>
+  </div>
 </template>
 
 <script>