CHANGELOG.md

+## [21.8.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v21.8.1...v21.8.2) (2020-09-25)
+
+
+### Bug Fixes
+
+* **GlLabeledAvatar:** fix a few CSS issues ([3ef73f1](https://gitlab.com/gitlab-org/gitlab-ui/commit/3ef73f1e9eb450cc1cb54a66f3db9c0eaba6d55b))
+
 ## [21.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v21.8.0...v21.8.1) (2020-09-24)
 
 

package.json

 {
   "name": "@gitlab/ui",
-  "version": "21.8.1",
+  "version": "21.8.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

src/components/base/avatar/avatar.scss

@@ -14,6 +14,7 @@ $gl-avatar-identicon-bgs: $gl-avatar-identicon-red, $gl-avatar-identicon-purple,
   @include gl-border-solid;
   @include gl-border-gray-a-08;
   @include gl-overflow-hidden;
+  @include gl-flex-shrink-0;
 }
 
 .gl-avatar-s16 {
@@ -74,7 +75,7 @@ $gl-avatar-identicon-bgs: $gl-avatar-identicon-red, $gl-avatar-identicon-purple,
   @include gl-text-gray-900;
   @include gl-display-flex;
   @include gl-justify-content-center;
-  @include gl-flex-direction-column;
+  @include gl-align-items-center;
 }
 
 // Background colors

src/components/base/avatar_labeled/avatar_labeled.vue

@@ -21,8 +21,10 @@ export default {
 <template>
   <div class="gl-avatar-labeled">
     <gl-avatar v-bind="$attrs" alt v-on="$listeners" />
-    <div class="gl-avatar-labeled-labels">
-      <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mx-n1 gl-my-n1">
+    <div class="gl-avatar-labeled-labels gl-text-left!">
+      <div
+        class="gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"
+      >
         <span class="gl-avatar-labeled-label">{{ label }}</span>
         <slot name="meta"></slot>
       </div>

src/scss/utility-mixins/list-style.scss

@@ -6,3 +6,7 @@
 @mixin gl-list-style-none {
   list-style-type: none;
 }
+
+@mixin gl-list-style-position-inside {
+  list-style-position: inside;
+}