From d45893a22c9eb6b3c098ce95d46cb24093a32ebf Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Mon, 22 Nov 2021 14:50:55 +0100
Subject: [PATCH] ConverseJS theme: Fix margin when hidding avatars.

---
 .stylelintrc.js                            |  2 +-
 conversejs/custom/sass/_peertubetheme.scss | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index 812c1c60..d779e6f2 100644
--- a/.stylelintrc.js
+++ b/.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.',
       }
diff --git a/conversejs/custom/sass/_peertubetheme.scss b/conversejs/custom/sass/_peertubetheme.scss
index f700ee8b..c3cb720b 100644
--- a/conversejs/custom/sass/_peertubetheme.scss
+++ b/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;
+        }
       }
     }
   }