diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss index 29af82e54ba..37222c3174d 100644 --- a/plugins/chat/assets/stylesheets/common/chat-composer.scss +++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss @@ -4,7 +4,11 @@ flex-direction: column; z-index: 3; background-color: var(--primary-very-low); - padding: 12px 10px 0 10px; + padding: 12px 10px env(safe-area-inset-bottom) 10px; + + .keyboard-visible & { + padding-bottom: 0; + } #chat-full-page-uploader, #chat-widget-uploader { diff --git a/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss index aec77378bd0..27dad8600ad 100644 --- a/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss +++ b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss @@ -1,10 +1,9 @@ -@mixin chat-height { +@mixin chat-height($inset: 0px) { // desktop and mobile height: calc( var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - var(--chat-draft-header-height, 0px) - - var(--chat-direct-message-creator-height, 0px) - - env(safe-area-inset-bottom) + var(--chat-direct-message-creator-height, 0px) - $inset ); // mobile with keyboard opened @@ -21,8 +20,7 @@ height: calc( var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - var(--footer-nav-height, 0px) - var(--chat-draft-header-height, 0px) - - var(--chat-direct-message-creator-height, 0px) - - env(safe-area-inset-bottom) + var(--chat-direct-message-creator-height, 0px) ); } diff --git a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss index 337a9f04ea9..05d412fc8b2 100644 --- a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss +++ b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; position: relative; - @include chat-height; + @include chat-height(env(safe-area-inset-bottom)); &__items { overflow-y: scroll;