From 36650968368eb0a9bb1e7fef6c725f936b4a93ed Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Thu, 4 Jul 2024 15:48:22 +0200
Subject: [PATCH] Poll WIP (#231):

* fix css depending on chat height.
---
 .../custom/plugins/poll/styles/poll.scss      | 29 +++++++++++--------
 conversejs/custom/plugins/size/index.js       | 14 +++++++--
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/conversejs/custom/plugins/poll/styles/poll.scss b/conversejs/custom/plugins/poll/styles/poll.scss
index 81ac2dd8..be5700d5 100644
--- a/conversejs/custom/plugins/poll/styles/poll.scss
+++ b/conversejs/custom/plugins/poll/styles/poll.scss
@@ -13,8 +13,6 @@
       border: 1px solid var(--peertube-menu-background);
       margin: 5px;
       padding: 5px;
-      max-height: 150px;
-      overflow-y: scroll;
 
       .livechat-poll-toggle {
         background: unset;
@@ -92,6 +90,15 @@
       }
     }
   }
+
+  &[livechat-converse-root-height="small"],
+  &[livechat-converse-root-height="medium"] {
+    /* stylelint-disable-next-line no-descending-specificity */
+    livechat-converse-muc-poll > div {
+      max-height: 150px;
+      overflow-y: scroll;
+    }
+  }
 }
 
 body[livechat-viewer-mode="on"] {
@@ -103,17 +110,15 @@ body[livechat-viewer-mode="on"] {
 
 .livechat-readonly {
   .conversejs {
-    livechat-converse-muc-poll {
-      /* stylelint-disable-next-line no-descending-specificity */
-      & > div {
-        // In readonly mode, dont impose max-height
-        max-height: initial !important;
-        overflow-y: visible !important;
+    /* stylelint-disable-next-line no-descending-specificity */
+    livechat-converse-muc-poll > div {
+      // In readonly mode, dont impose max-height
+      max-height: initial !important;
+      overflow-y: visible !important;
 
-        &.livechat-poll-over {
-          // stop showing poll when over in readonly mode
-          display: none !important;
-        }
+      &.livechat-poll-over {
+        // stop showing poll when over in readonly mode
+        display: none !important;
       }
     }
   }
diff --git a/conversejs/custom/plugins/size/index.js b/conversejs/custom/plugins/size/index.js
index badd5d10..7732002e 100644
--- a/conversejs/custom/plugins/size/index.js
+++ b/conversejs/custom/plugins/size/index.js
@@ -43,17 +43,25 @@ function start () {
 
 function stop () {
   rootResizeObserver.disconnect()
-  document.querySelector('converse-root')?.removeAttribute('livechat-converse-root-width')
+  const root = document.querySelector('converse-root')
+  if (root) {
+    root.removeAttribute('livechat-converse-root-width')
+    root.removeAttribute('livechat-converse-root-height')
+  }
 }
 
 function handle (el) {
   const rect = el.getBoundingClientRect()
+  const height = rect.height > 576 ? 'high' : (rect.height > 250 ? 'medium' : 'small')
   const width = rect.width > 576 ? 'large' : (rect.width > 250 ? 'medium' : 'small')
-  const previous = el.getAttribute('livechat-converse-root-width')
-  if (width === previous) { return }
+  const previousHeight = el.getAttribute('livechat-converse-root-height')
+  const previousWidth = el.getAttribute('livechat-converse-root-width')
+  if (width === previousWidth && height === previousHeight) { return }
 
   el.setAttribute('livechat-converse-root-width', width)
+  el.setAttribute('livechat-converse-root-height', height)
   api.trigger('livechatSizeChanged', {
+    height: height,
     width: width
   })
 }