iOS viewport was less than 100vh so had to redefine vh units

fixes #1571

CHANGES.md

@@ -20,6 +20,7 @@
 - #1550: Legitimate carbons being blocked due to erroneous forgery check
 - #1554: Room auto-configuration broke if the config form contained fields with type `fixed`
 - #1558: `this.get` is not a function error when `forward_messages` is set to `true`.
+- #1572: In `fullscreen` view mode the top is cut off on iOS
 
 - **Breaking changes**:
 - Rename `muc_disable_moderator_commands` to [muc_disable_slash_commands](https://conversejs.org/docs/html/configuration.html#muc-disable-slash-commands).

sass/_variables.scss

@@ -160,7 +160,7 @@ $mobile_portrait_length: 480px !default;
     --avatar-background-color: white;
 
     --fullpage-chat-head-height: 62px;
-    --fullpage-chat-height: 100vh;
+    --fullpage-chat-height: calc(var(--vh, 1vh) * 100);
     --fullpage-chat-width: 100%;
     --fullpage-emoji-picker-height: 200px;
     --fullpage-max-chat-textarea-height: 15em;

src/converse-chatboxviews.js

@@ -163,6 +163,14 @@ converse.plugins.add('converse-chatboxviews', {
         });
 
         _converse.api.listen.on('clearSession', () => _converse.chatboxviews.closeAllChatBoxes());
+
+
+        function calculateViewportHeightUnit () {
+            const vh = window.innerHeight * 0.01;
+            document.documentElement.style.setProperty('--vh', `${vh}px`);
+        }
+        _converse.api.listen.on('chatBoxViewsInitialized', () => calculateViewportHeightUnit());
+        window.addEventListener('resize', () => calculateViewportHeightUnit());
         /************************ END Event Handlers ************************/
     }
 });