FIX: various fixes following channel height changes (#21553)

- apply height on threads list
- apply height on thread
- correctly applies env(safe-area-inset-bottom)

plugins/chat/assets/stylesheets/common/chat-channel.scss

@@ -10,14 +10,16 @@
   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)
+      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)
+        var(--chat-direct-message-creator-height, 0px) -
+        env(safe-area-inset-bottom)
     );
   }
 

plugins/chat/assets/stylesheets/common/chat-drawer.scss

@@ -94,7 +94,9 @@ html.rtl {
     height: auto !important;
   }
 
-  .chat-channel {
+  .chat-channel,
+  .chat-thread,
+  .chat-thread-list {
     height: 100%;
   }
 }

plugins/chat/assets/stylesheets/common/chat-thread-list.scss

@@ -1,29 +0,0 @@
-.chat-thread-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  position: relative;
-
-  &__items {
-    overflow-y: scroll;
-    @include chat-scrollbar();
-    box-sizing: border-box;
-    flex-grow: 1;
-    overscroll-behavior: contain;
-    display: flex;
-    flex-direction: column;
-
-    .chat-thread-list-item {
-      margin: 0.75rem 0.25rem 0.75rem 0.5rem;
-
-      & + .chat-thread-list-item {
-        margin-top: 0;
-      }
-    }
-  }
-
-  &__no-threads {
-    @include thread-list-item;
-    margin: 0.5rem 0rem 0.5rem 0.5rem;
-  }
-}

plugins/chat/assets/stylesheets/common/chat-thread.scss

@@ -1,9 +1,24 @@
 .chat-thread {
   display: flex;
   flex-direction: column;
-  height: 100%;
   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)
+    );
+  }
+
   &__header {
     height: var(--chat-header-offset);
     min-height: var(--chat-header-offset);

plugins/chat/assets/stylesheets/common/chat-threads-list.scss

@@ -0,0 +1,44 @@
+.chat-thread-list {
+  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)
+    );
+  }
+
+  &__items {
+    overflow-y: scroll;
+    @include chat-scrollbar();
+    box-sizing: border-box;
+    flex-grow: 1;
+    overscroll-behavior: contain;
+    display: flex;
+    flex-direction: column;
+
+    .chat-thread-list-item {
+      margin: 0.75rem 0.25rem 0.75rem 0.5rem;
+
+      & + .chat-thread-list-item {
+        margin-top: 0;
+      }
+    }
+  }
+
+  &__no-threads {
+    @include thread-list-item;
+    margin: 0.5rem 0rem 0.5rem 0.5rem;
+  }
+}

plugins/chat/assets/stylesheets/common/index.scss

@@ -48,5 +48,5 @@
 @import "incoming-chat-webhooks";
 @import "reviewable-chat-message";
 @import "chat-thread-list-item";
-@import "chat-thread-list";
+@import "chat-threads-list";
 @import "chat-thread-original-message";