From ef1b49f2919f546590ebd9b78985d5c2bac3a16a Mon Sep 17 00:00:00 2001 From: John Livingston Date: Wed, 7 Aug 2024 00:09:55 +0200 Subject: [PATCH] Fix: increase chat height on small screens, try to better detect the device viewport size and orientation. --- CHANGELOG.md | 1 + assets/styles/video/_container.scss | 19 ++++++++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 277296f9..87afdf7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ TODO: actions related to #144 and #145 must be added in the occupant list (waiti * Updated mod_muc_moderation to upstream. * Fix new task ordering. * Fix: clicking on the current user nickname in message history was failing to open the profile modal. +* Fix: increase chat height on small screens, try to better detect the device viewport size and orientation. ## 10.3.3 diff --git a/assets/styles/video/_container.scss b/assets/styles/video/_container.scss index 402af31f..678f5f39 100644 --- a/assets/styles/video/_container.scss +++ b/assets/styles/video/_container.scss @@ -18,16 +18,29 @@ /* 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 + We must ensure that the px height limit for converse-muc and converse-root is always higher than livechat-viewer-mode-content max size. + Note: We also must ensure that when the user has choosen its nickname, and there is an + ongoing poll, the user can see the chat when the poll is folded. */ #peertube-plugin-livechat-container converse-root { display: block; border: 1px solid black; - min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport. + min-height: max(30vh, 300px); // Always at least 200px, and ideally at least 30% of viewport. height: 100%; converse-muc { - min-height: max(30vh, 200px); + min-height: max(30vh, 300px); + } + + @media screen and (orientation: portrait) and (max-width: 767px) { + /* On small screen, and when portrait mode, we are givint the chat more vertical space. + It should go under the video. + */ + min-height: max(50vh, 300px); + + converse-muc { + min-height: max(50vh, 300px); + } } }