From d5b212712b4c89ffd77ea557cf55d19bd581c907 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Wed, 17 Nov 2021 11:34:01 +0100
Subject: [PATCH] Peertube theme: hide avatars when width<576px.

---
 conversejs/custom/sass/_peertubetheme.scss | 14 ++++++++++++++
 conversejs/custom/sass/livechat.scss       |  2 ++
 2 files changed, 16 insertions(+)
 create mode 100644 conversejs/custom/sass/_peertubetheme.scss

diff --git a/conversejs/custom/sass/_peertubetheme.scss b/conversejs/custom/sass/_peertubetheme.scss
new file mode 100644
index 00000000..fa6b9acc
--- /dev/null
+++ b/conversejs/custom/sass/_peertubetheme.scss
@@ -0,0 +1,14 @@
+#conversejs.theme-peertube {
+  // hidding avatars when screen width is not big enough.
+  @media screen and (max-width: 576px) {
+    .message {
+      .chat-msg__content {
+        width: 100%;
+      }
+
+      .chat-msg__avatar {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/conversejs/custom/sass/livechat.scss b/conversejs/custom/sass/livechat.scss
index b307e995..520e392c 100644
--- a/conversejs/custom/sass/livechat.scss
+++ b/conversejs/custom/sass/livechat.scss
@@ -1,5 +1,6 @@
 @import "./variables";
 @import "sass/converse";
+@import "./peertubetheme";
 
 body.livechat-iframe #conversejs .chat-head {
   // Hidding the chat-head when the plugin is displayed in an iframe.
@@ -7,6 +8,7 @@ body.livechat-iframe #conversejs .chat-head {
 }
 
 #conversejs-bg {
+  // We are using a custom template that differs from the original, this is required.
   .converse-brand__heading {
     img {
       margin-top: 0.3em;