Issue #3261627 by agami4: Improve space of the avatar on the small teaser

assets/css/list.css

 .list-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   width: 100%;
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
@@ -11,32 +17,47 @@
 .list-item__avatar {
   width: 24px;
   height: 24px;
-  flex: 0 0 24px;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 24px;
+          flex: 0 0 24px;
   margin-right: 10px;
   border-radius: 50%;
   margin-top: 2px;
 }
 
+[dir='rtl'] .list-item__avatar {
+  margin-right: 0;
+  margin-left: 10px;
+}
+
 .list-item__avatar--medium {
   width: 44px;
   height: 44px;
-  flex-basis: 44px;
+  -ms-flex-preferred-size: 44px;
+      flex-basis: 44px;
 }
 
 .list-item--withlabel {
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
 }
 
 .list-item__label {
   margin-right: 20px;
   font-weight: 500;
-  flex-basis: 100%;
-  align-self: flex-start;
+  -ms-flex-preferred-size: 100%;
+      flex-basis: 100%;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
 }
 
 .list-item__text {
-  flex-grow: 1;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
   max-width: 100%;
   margin: 0;
   font-size: .875rem;
@@ -57,7 +78,9 @@
   padding-left: 1rem;
   padding-right: 1rem;
   margin-bottom: -1px;
-  justify-content: flex-start;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
 }
 
 .list-item--visibility .form-group label {
@@ -65,10 +88,6 @@
   cursor: pointer;
 }
 
-.list-item--visibility .form-group .form-radio {
-  z-index: -1;
-}
-
 .list-item--visibility:hover, .list-item--visibility:focus-within {
   background-color: #e6e6e6;
   cursor: pointer;
@@ -80,7 +99,8 @@
 
 .dropdown-menu--visibility > .list-item--visibility > a, .dropdown-menu--visibility > .list-item--visibility > a:hover, .dropdown-menu--visibility > .list-item--visibility > a:focus {
   background-color: inherit;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline: none;
 }
 
@@ -117,6 +137,7 @@
 
 @media (min-width: 600px) {
   .list-item__label {
-    flex-basis: 180px;
+    -ms-flex-preferred-size: 180px;
+        flex-basis: 180px;
   }
 }

components/02-atoms/list/list.scss

@@ -51,6 +51,11 @@
   margin-right: 10px;
   border-radius: 50%;
   margin-top: 2px; // vertical alignment
+
+  [dir='rtl'] & {
+    margin-right: 0;
+    margin-left: 10px;
+  }
 }
 
 .list-item__avatar--medium {