diff --git a/plugins/chat/assets/stylesheets/common/chat-channel.scss b/plugins/chat/assets/stylesheets/common/chat-channel.scss
index 37d5bff6843..f68d0d4e46c 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel.scss
@@ -7,21 +7,7 @@
   grid-area: main;
   width: 100%;
   min-width: 250px;
-  height: calc(
-    var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-      var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) -
-      var(--chat-direct-message-creator-height, 0px) -
-      env(safe-area-inset-bottom)
-  );
-
-  .footer-nav-ipad & {
-    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)
-    );
-  }
+  @include chat-height;
 
   .open-drawer-btn,
   .open-thread-list-btn {
diff --git a/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
new file mode 100644
index 00000000000..aec77378bd0
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss
@@ -0,0 +1,39 @@
+@mixin chat-height {
+  // 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)
+  );
+
+  // mobile with keyboard opened
+  .keyboard-visible & {
+    height: calc(
+      var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
+        var(--chat-draft-header-height, 0px) -
+        var(--chat-direct-message-creator-height, 0px)
+    );
+  }
+
+  // ipad
+  .footer-nav-ipad & {
+    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)
+    );
+  }
+
+  // ipad with keyboard opened
+  .keyboard-visible & {
+    .footer-nav-ipad & {
+      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)
+      );
+    }
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread.scss b/plugins/chat/assets/stylesheets/common/chat-thread.scss
index 1cecf4642b1..90da118944e 100644
--- a/plugins/chat/assets/stylesheets/common/chat-thread.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-thread.scss
@@ -2,22 +2,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-
-  height: calc(
-    var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-      var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) -
-      var(--chat-direct-message-creator-height, 0px) -
-      env(safe-area-inset-bottom)
-  );
-
-  .footer-nav-ipad & {
-    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)
-    );
-  }
+  @include chat-height;
 
   &__header {
     height: var(--chat-header-offset);
diff --git a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
index 0ecb2c3a6ea..337a9f04ea9 100644
--- a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
@@ -2,22 +2,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-
-  height: calc(
-    var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-      var(--composer-height, 0px) - var(--chat-draft-header-height, 0px) -
-      var(--chat-direct-message-creator-height, 0px) -
-      env(safe-area-inset-bottom)
-  );
-
-  .footer-nav-ipad & {
-    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)
-    );
-  }
+  @include chat-height;
 
   &__items {
     overflow-y: scroll;
diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss
index a544774a9b7..c4f7183e36b 100644
--- a/plugins/chat/assets/stylesheets/common/index.scss
+++ b/plugins/chat/assets/stylesheets/common/index.scss
@@ -1,3 +1,4 @@
+@import "chat-height-mixin";
 @import "base-common";
 @import "sidebar-extensions";
 @import "chat-browse";