diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 181e7d8f978..d05b39de0ff 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -31,18 +31,21 @@
 
   @include unselectable;
 
-  // 100dvh with fallback for old browsers
-  --100dvh: 100vh;
-  @supports (height: 100dvh) {
-    --100dvh: 100dvh;
+  // 1dvh with fallback for old browsers
+  --1dvh: 1vh;
+  @supports (height: 1dvh) {
+    --1dvh: 1dvh;
   }
 
-  height: calc(var(--100dvh) - var(--header-offset, 0px));
+  height: calc(
+    var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px)
+  );
 
   .footer-nav-ipad & {
     top: calc(var(--header-offset) + var(--footer-nav-height));
     height: calc(
-      var(--100dvh) - var(--header-offset, 0px) - var(--footer-nav-height, 0px)
+      var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) -
+        var(--footer-nav-height, 0px)
     );
   }
 
diff --git a/plugins/chat/assets/javascripts/discourse/components/channels-list.hbs b/plugins/chat/assets/javascripts/discourse/components/channels-list.hbs
index eefdc9fdcee..6df9197b8f8 100644
--- a/plugins/chat/assets/javascripts/discourse/components/channels-list.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/channels-list.hbs
@@ -1,10 +1,8 @@
-{{#if
-  (and this.showMobileDirectMessageButton this.canCreateDirectMessageChannel)
-}}
+{{#if this.showMobileDirectMessageButton}}
   <LinkTo
     @route="chat.draft-channel"
     class="btn-flat open-draft-channel-page-btn keep-mobile-sidebar-open btn-floating"
-    title={{i18n this.createDirectMessageChannelLabel}}
+    title={{i18n "chat.direct_messages.new"}}
   >
     {{d-icon "plus"}}
   </LinkTo>
@@ -62,6 +60,7 @@
           />
         {{/each}}
       {{/if}}
+
     </div>
   {{/if}}
 
diff --git a/plugins/chat/assets/javascripts/discourse/components/channels-list.js b/plugins/chat/assets/javascripts/discourse/components/channels-list.js
index 77799af89b1..c08543b0013 100644
--- a/plugins/chat/assets/javascripts/discourse/components/channels-list.js
+++ b/plugins/chat/assets/javascripts/discourse/components/channels-list.js
@@ -26,7 +26,7 @@ export default class ChannelsList extends Component {
   }
 
   get showMobileDirectMessageButton() {
-    return this.site.mobileView && this.showDirectMessageChannels;
+    return this.site.mobileView && this.canCreateDirectMessageChannel;
   }
 
   get inSidebar() {
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-browse-view.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-browse-view.hbs
index 229f6b600dc..d004eb0ceec 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-browse-view.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-browse-view.hbs
@@ -1,12 +1,3 @@
-{{#if this.chatProgressBarContainer}}
-  {{#in-element this.chatProgressBarContainer}}
-    <DProgressBar
-      @key="browse-list"
-      @isLoading={{this.channelsCollection.loading}}
-    />
-  {{/in-element}}
-{{/if}}
-
 <div class="chat-browse-view__header chat-full-page-header">
   {{#if this.site.mobileView}}
     <LinkTo
@@ -75,18 +66,23 @@
       </div>
     </div>
   {{else if this.channelsCollection.length}}
-    <div class="chat-browse-view__content_wrapper">
-      <div class="chat-browse-view__content">
-        <div class="chat-browse-view__cards">
-          {{#each this.channelsCollection as |channel|}}
-            <ChatChannelCard @channel={{channel}} />
-          {{/each}}
+    <LoadMore
+      @selector=".chat-channel-card"
+      @action={{this.channelsCollection.loadMore}}
+    >
+      <div class="chat-browse-view__content_wrapper">
+        <div class="chat-browse-view__content">
+          <div class="chat-browse-view__cards">
+            {{#each this.channelsCollection as |channel|}}
+              <ChatChannelCard @channel={{channel}} />
+            {{/each}}
+          </div>
         </div>
-
-        {{#unless this.channelsCollection.loading}}
-          <OnVisibilityAction @action={{action "onScroll"}} />
-        {{/unless}}
       </div>
-    </div>
+
+      <ConditionalLoadingSpinner
+        @condition={{this.channelsCollection.loading}}
+      />
+    </LoadMore>
   {{/if}}
 </div>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-members-view.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-members-view.hbs
index ff3bb3fb71f..56be4a2a42d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-members-view.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-members-view.hbs
@@ -1,45 +1,41 @@
-{{#if this.chatProgressBarContainer}}
-  {{#in-element this.chatProgressBarContainer}}
-    <DProgressBar @key="members-view" @isLoading={{this.members.loading}} />
-  {{/in-element}}
-{{/if}}
-
 {{#if (gt this.channel.membershipsCount 0)}}
-  <div class="channel-members-view-wrapper">
-    <div
-      class={{concat
-        "channel-members-view__search-input-container"
-        (if this.isSearchFocused " is-focused")
-      }}
-    >
-      <Input
-        class={{this.inputSelector}}
-        placeholder={{i18n "chat.members_view.filter_placeholder"}}
-        {{on "input" (action "onFilterMembers" value="target.value")}}
-        {{on "focusin" (action (mut this.isSearchFocused) true)}}
-        {{on "focusout" (action (mut this.isSearchFocused) false)}}
-      />
-      {{d-icon "search"}}
-    </div>
+  <LoadMore
+    @selector=".channel-members-view__list-item"
+    @action={{this.loadMore}}
+  >
+    <div class="channel-members-view-wrapper">
+      <div
+        class={{concat
+          "channel-members-view__search-input-container"
+          (if this.isSearchFocused " is-focused")
+        }}
+      >
+        <Input
+          class={{this.inputSelector}}
+          placeholder={{i18n "chat.members_view.filter_placeholder"}}
+          {{on "input" (action "onFilterMembers" value="target.value")}}
+          {{on "focusin" (action (mut this.isSearchFocused) true)}}
+          {{on "focusout" (action (mut this.isSearchFocused) false)}}
+        />
+        {{d-icon "search"}}
+      </div>
 
-    <div
-      class="channel-members-view__list-container"
-      {{on "scroll" (action "loadMore")}}
-    >
-
-      <div role="list" class="channel-members-view__list">
-        {{#each this.members as |membership|}}
-          <div class="channel-members-view__list-item">
-            <ChatUserInfo @user={{membership.user}} />
-          </div>
-        {{else}}
-          {{#unless this.isFetchingMembers}}
-            {{i18n "chat.channel.no_memberships_found"}}
-          {{/unless}}
-        {{/each}}
+      <div class="channel-members-view__list-container">
+        <div role="list" class="channel-members-view__list">
+          {{#each this.members as |membership|}}
+            <div class="channel-members-view__list-item">
+              <ChatUserInfo @user={{membership.user}} />
+            </div>
+          {{else}}
+            {{#unless this.isFetchingMembers}}
+              {{i18n "chat.channel.no_memberships_found"}}
+            {{/unless}}
+          {{/each}}
+        </div>
       </div>
     </div>
-  </div>
+    <ConditionalLoadingSpinner @condition={{this.members.loading}} />
+  </LoadMore>
 {{else}}
   <div class="channel-members-view-wrapper">
     {{i18n "chat.channel.no_memberships"}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.hbs
index 35d7499f23b..4784c08ddec 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.hbs
@@ -1,6 +1,10 @@
 <div class="chat-draft">
   {{#if this.site.mobileView}}
-    <header class="chat-draft-header">
+    <header
+      class="chat-draft-header"
+      {{did-insert this.setChatDraftHeaderHeight}}
+      {{will-destroy this.unsetChatDraftHeaderHeight}}
+    >
       <FlatButton
         @class="chat-draft-header__btn btn"
         @icon="chevron-left"
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.js b/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.js
index 6d80fdc7331..a4dd13e2e90 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.js
@@ -14,6 +14,22 @@ export default class ChatDraftChannelScreen extends Component {
     return this.router.transitionTo("chat.index");
   }
 
+  @action
+  setChatDraftHeaderHeight(element) {
+    document.documentElement.style.setProperty(
+      "--chat-draft-header-height",
+      `${element.clientHeight}px`
+    );
+  }
+
+  @action
+  unsetChatDraftHeaderHeight() {
+    document.documentElement.style.setProperty(
+      "--chat-draft-header-height",
+      "0px"
+    );
+  }
+
   @action
   onChangeSelectedUsers(users) {
     this._fetchPreviewedChannel(users);
diff --git a/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.hbs b/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.hbs
index aaa7c9f9420..57641f3e0ea 100644
--- a/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.hbs
@@ -5,7 +5,11 @@
 {{/if}}
 
 {{#if (and this.channel.isDraft (not this.isLoading))}}
-  <div class="direct-message-creator">
+  <div
+    class="direct-message-creator"
+    {{did-insert this.setDirectMessageCreatorHeight}}
+    {{will-destroy this.unsetDirectMessageCreatorHeight}}
+  >
     <div
       class="filter-area {{if this.isFilterFocused 'is-focused'}}"
       role="button"
diff --git a/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.js b/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.js
index 0e1c0871a5c..a636caf0d73 100644
--- a/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.js
+++ b/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.js
@@ -126,6 +126,22 @@ export default Component.extend({
     });
   },
 
+  @action
+  setDirectMessageCreatorHeight(element) {
+    document.documentElement.style.setProperty(
+      "--chat-direct-message-creator-height",
+      `${element.clientHeight}px`
+    );
+  },
+
+  @action
+  unsetDirectMessageCreatorHeight() {
+    document.documentElement.style.setProperty(
+      "--chat-direct-message-creator-height",
+      "0px"
+    );
+  },
+
   @action
   onFilterInput(term) {
     this.set("term", term);
diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss
index c81fbae3ac3..d7b4f7c885e 100644
--- a/plugins/chat/assets/stylesheets/common/base-common.scss
+++ b/plugins/chat/assets/stylesheets/common/base-common.scss
@@ -428,8 +428,7 @@ body.has-full-page-chat {
     }
   }
 
-  .chat-messages-scroll,
-  .chat-channel {
+  .chat-messages-scroll {
     box-sizing: border-box;
     height: 100%;
   }
@@ -574,30 +573,13 @@ html.has-full-page-chat {
   height: 100%;
   width: 100%;
 
-  &.keyboard-visible body #main-outlet .full-page-chat {
-    padding-bottom: 0.2rem;
-  }
-
   body {
     height: 100%;
     width: 100%;
 
-    &.footer-nav-ipad {
-      #main-outlet-wrapper {
-        grid-template-rows: calc(
-          var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-            var(--footer-nav-height, 0px)
-        );
-      }
-    }
-
     #main-outlet {
       display: flex;
       flex-direction: column;
-      max-height: calc(
-        var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
-          var(--composer-height, 0px)
-      );
 
       .full-page-chat {
         height: 100%;
@@ -620,32 +602,12 @@ html.has-full-page-chat {
 
   // these need to apply to desktop too, because iPads
   &.discourse-touch {
-    // iPad web
-    #main-outlet-wrapper {
-      // restrict the row height, including when virtual keyboard is open
-      grid-template-rows: calc(
-        var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px)
-      );
-
-      .sidebar-wrapper {
-        // prevents sidebar from overflowing behind the virtual keyboard
-        height: 100%;
-      }
-    }
-
     .full-page-chat,
     .chat-channel,
     #main-outlet {
       // allows containers to shrink to fit
       min-height: 0;
     }
-
-    #main-outlet {
-      // limits height for iPad
-      max-height: calc(
-        100vh - calc(var(--header-offset) + var(--composer-ipad-padding))
-      );
-    }
   }
   [data-popper-reference-hidden] {
     visibility: hidden;
diff --git a/plugins/chat/assets/stylesheets/common/chat-browse.scss b/plugins/chat/assets/stylesheets/common/chat-browse.scss
index 71952b3a8cb..7199ffad249 100644
--- a/plugins/chat/assets/stylesheets/common/chat-browse.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-browse.scss
@@ -1,16 +1,7 @@
 .chat-browse-view {
   position: relative;
-  height: calc(100vh - var(--header-offset) - var(--chat-header-offset));
-  padding-top: 1em;
-  padding-bottom: 41px;
   box-sizing: border-box;
-  overflow-y: scroll;
-
-  @include chat-scrollbar();
-
-  @include breakpoint(mobile-large) {
-    padding-right: 1rem; //fix for different scroll behaviour on mobile where overflow-y:scroll acts like auto
-  }
+  padding: 1rem;
 
   &__header {
     display: flex;
@@ -28,18 +19,14 @@
   }
 
   &__content_wrapper {
-    margin: 2rem 0 0 1rem;
     box-sizing: border-box;
-
-    @include breakpoint(tablet) {
-      margin-top: 1rem;
-    }
+    margin-top: 1rem;
   }
 
   &__cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    grid-gap: 2.5rem;
+    grid-gap: 2rem;
 
     @include breakpoint(tablet) {
       grid-template-columns: repeat(1, 1fr);
@@ -51,7 +38,6 @@
     display: flex;
     justify-content: space-between;
     align-items: end;
-    margin: 0 0 0 1rem;
 
     @include breakpoint(tablet) {
       flex-direction: column;
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
index 953a39d2657..ef6db58e7a3 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
@@ -101,10 +101,6 @@ input.channel-members-view__search-input {
   flex-direction: column;
   margin-top: 1em;
   box-sizing: border-box;
-  min-height: 1px;
-  overflow-y: auto;
-  height: 100%;
-  @include chat-scrollbar();
 }
 
 .channel-members-view__list-item {
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel.scss b/plugins/chat/assets/stylesheets/common/chat-channel.scss
index c0718a791aa..37d74b5b24d 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel.scss
@@ -7,6 +7,19 @@
   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)
+  );
+
+  .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)
+    );
+  }
 
   .open-drawer-btn,
   .open-thread-list-btn {
diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
index be3f22e40e4..758face2c0f 100644
--- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
@@ -251,4 +251,5 @@ a.chat-drawer-header__title {
   height: 100%;
   min-height: 1px;
   padding-bottom: 0.25em;
+  position: relative;
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-index.scss b/plugins/chat/assets/stylesheets/common/chat-index.scss
index 135be7c3906..ea5484bf790 100644
--- a/plugins/chat/assets/stylesheets/common/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-index.scss
@@ -1,3 +1,31 @@
+.btn-floating.open-draft-channel-page-btn {
+  position: fixed;
+  background: var(--tertiary);
+  bottom: 2rem;
+  right: 2rem;
+  border-radius: 50%;
+  font-size: var(--font-up-4);
+  padding: 1rem;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  z-index: z("usercard");
+  box-shadow: 0px 5px 5px -1px rgba(0, 0, 0, 0.25);
+
+  .d-icon {
+    color: var(--primary-very-low);
+  }
+
+  &:active {
+    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
+    transform: scale(0.9);
+  }
+
+  &:focus {
+    @include default-focus;
+    border-color: var(--quaternary);
+    outline-color: var(--quaternary);
+  }
+}
+
 .channels-list {
   overflow-y: auto;
   overscroll-behavior: contain;
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-index.scss b/plugins/chat/assets/stylesheets/mobile/chat-index.scss
index ca1d864b559..c4f7f696131 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-index.scss
@@ -76,32 +76,4 @@
       }
     }
   }
-
-  .btn-floating.open-draft-channel-page-btn {
-    position: absolute;
-    background: var(--tertiary);
-    bottom: 2.5rem;
-    right: 2.5rem;
-    border-radius: 50%;
-    font-size: var(--font-up-4);
-    padding: 1rem;
-    transition: transform 0.25s ease, box-shadow 0.25s ease;
-    z-index: z("usercard");
-    box-shadow: 0px 5px 5px -1px rgba(0, 0, 0, 0.25);
-
-    .d-icon {
-      color: var(--primary-very-low);
-    }
-
-    &:active {
-      box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
-      transform: scale(0.9);
-    }
-
-    &:focus {
-      @include default-focus;
-      border-color: var(--quaternary);
-      outline-color: var(--quaternary);
-    }
-  }
 }