From 2b6cd159512f3b96d7e8cf6def5ef01744324e48 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Tue, 23 Apr 2024 10:05:56 +0200
Subject: [PATCH] Fix UI on little screens (form for anonymous users was too
 high).

---
 CHANGELOG.md                                  |  1 +
 assets/styles/style.scss                      |  8 +++++++-
 conversejs/custom/shared/styles/livechat.scss | 11 +++++++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f76bed4..9a8a9ef1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Minor changes and fixes
 
 * Fix #370: "open with a remote Peertube" broken when chat is embedded in an iframe.
+* Fix UI on little screens (form for anonymous users was too high).
 
 ## 9.0.0
 
diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index 21f3a560..f17b80f8 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -79,10 +79,16 @@
   }
 }
 
+/* Note: livechat-viewer-mode-content (the form where anonymous users can
+    choose nickname or log in with external account), can be something like
+    ~180px height (at time of writing).
+    We must ensure that the 200px limit for converse-muc and converse-root is
+    always higher than livechat-viewer-mode-content max size.
+*/
 #peertube-plugin-livechat-container converse-root {
   display: block;
   border: 1px solid black;
-  min-height: max(30vh, 200px);
+  min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport.
   height: 100%;
 
   converse-muc {
diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss
index 9c3132f1..2f464b8c 100644
--- a/conversejs/custom/shared/styles/livechat.scss
+++ b/conversejs/custom/shared/styles/livechat.scss
@@ -62,10 +62,16 @@ body.livechat-readonly.livechat-noscroll {
     display: flex !important;
     flex-flow: row wrap !important;
     padding-bottom: 0.5em !important;
+    padding-top: 0.5em !important;
     border-top: 1px solid var(--chatroom-head-bg-color) !important;
-    gap: 10px;
+    gap: 0.5em 10px;
     align-items: baseline;
 
+    .form-group,
+    label {
+      margin-bottom: 0 !important; // replaced by the gap on .livechat-viewer-mode-content
+    }
+
     label {
       color: var(--text-color); // fix converseJs css that breaks this label color.
     }
@@ -77,7 +83,8 @@ body.livechat-readonly.livechat-noscroll {
   }
 
   .livechat-viewer-mode-external-login {
-    padding: 2em;
+    margin: 0.5em 0;
+    padding: 0;
   }
 }