diff --git a/CHANGES.md b/CHANGES.md index 32f4c8186..1dd006ac8 100644 --- a/CHANGES.md +++ b/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). diff --git a/sass/_variables.scss b/sass/_variables.scss index 233416fac..d16523dfd 100644 --- a/sass/_variables.scss +++ b/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; diff --git a/src/converse-chatboxviews.js b/src/converse-chatboxviews.js index 4a721b645..4a4b948a1 100644 --- a/src/converse-chatboxviews.js +++ b/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 ************************/ } });