ConverseJS theme: Fix margin when hidding avatars.

.stylelintrc.js

@@ -8,7 +8,7 @@ module.exports = {
   rules: {
     'selector-class-pattern': [
       // extending the kebab-case to accept ConverseJS class names.
-      '^([a-z][a-z0-9]*)(-[a-z0-9]+)*(__[a-z]+)?$',
+      '^([a-z][a-z0-9]*)(-[a-z0-9]+)*((__|--)[a-z]+(-[a-z0-9]+)*)?$',
       {
         message: 'Expected class selector to be kebab-case, or ConverseJS-style.',
       }

conversejs/custom/sass/_peertubetheme.scss

@@ -2,12 +2,20 @@
   // hidding avatars when screen width is not big enough.
   @media screen and (max-width: 576px) {
     .message {
-      .chat-msg__content {
-        width: 100%;
-      }
+      &.chat-msg {
+        .chat-msg__content {
+          width: 100%;
+        }
 
-      .chat-msg__avatar {
-        display: none;
+        &.chat-msg--followup {
+          &.chat-msg--with-avatar .chat-msg__content {
+            margin-left: 0.5em;
+          }
+        }
+
+        .chat-msg__avatar {
+          display: none;
+        }
       }
     }
   }