UX: multiple minor improvements (#20917)

- Raises the scroll distance to 250px instead of 100px to show the arrow down button
- Always have a margin on drawer when showing channel list, removes this margin when the scrollbar is apparent
- Makes all scrollbar used in chat look the same through the chat-scrollbar mixin
- Ensures hover state is not persistent on channel row in mobile
- Makes the channel row full width on mobile

plugins/chat/assets/javascripts/discourse/components/channels-list.hbs

@@ -13,11 +13,13 @@
 <div
   role="region"
   aria-label={{i18n "chat.aria_roles.channels_list"}}
-  class="channels-list"
+  class={{concat-class "channels-list" (if this.hasScrollbar "has-scrollbar")}}
   {{on
     "scroll"
     (if this.chatStateManager.isFullPageActive this.storeScrollPosition (noop))
   }}
+  {{did-insert this.computeHasScrollbar}}
+  {{chat/on-resize this.computeResizedEntries}}
 >
   {{#if this.displayPublicChannels}}
     <div class="chat-channel-divider public-channels-section">

plugins/chat/assets/javascripts/discourse/components/channels-list.js

@@ -3,7 +3,7 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { schedule } from "@ember/runloop";
 import { inject as service } from "@ember/service";
-
+import { tracked } from "@glimmer/tracking";
 export default class ChannelsList extends Component {
   @service chat;
   @service router;
@@ -13,6 +13,18 @@ export default class ChannelsList extends Component {
   @service session;
   @service currentUser;
 
+  @tracked hasScrollbar = false;
+
+  @action
+  computeHasScrollbar(element) {
+    this.hasScrollbar = element.scrollHeight > element.clientHeight;
+  }
+
+  @action
+  computeResizedEntries(entries) {
+    this.computeHasScrollbar(entries[0].target);
+  }
+
   get showMobileDirectMessageButton() {
     return this.site.mobileView && this.showDirectMessageChannels;
   }

plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js

@@ -485,7 +485,7 @@ export default class ChatLivePane extends Component {
 
   @action
   computeArrow() {
-    this.needsArrow = Math.abs(this._scrollerEl.scrollTop) >= 100;
+    this.needsArrow = Math.abs(this._scrollerEl.scrollTop) >= 250;
   }
 
   @action

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

@@ -283,31 +283,15 @@ $float-height: 530px;
     flex-grow: 1;
     overflow-y: scroll;
     overscroll-behavior: contain;
-    scrollbar-color: var(--primary-low) transparent;
-    transition: scrollbar-color 0.2s ease-in-out;
     display: flex;
     flex-direction: column-reverse;
     z-index: 1;
-    margin: 0 3px 0 0;
+    margin: 0 1px 0 0;
     will-change: transform;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
 
-    &::-webkit-scrollbar {
-      width: 15px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: var(--primary-low);
-      border-radius: 8px;
-      border: 3px solid var(--secondary);
-    }
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-    &:hover {
-      scrollbar-color: var(--primary-low-mid) transparent;
-      &::-webkit-scrollbar-thumb {
-        background: var(--primary-low-mid);
-      }
-    }
+    @include chat-scrollbar();
 
     .join-channel-btn.in-float {
       position: absolute;

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

@@ -5,7 +5,8 @@
   padding-bottom: 41px;
   box-sizing: border-box;
   overflow-y: scroll;
-  @include chat-scrollbar(var(--secondary));
+
+  @include chat-scrollbar();
 
   @include breakpoint(mobile-large) {
     padding-right: 1rem; //fix for different scroll behaviour on mobile where overflow-y:scroll acts like auto

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

@@ -104,7 +104,7 @@ input.channel-members-view__search-input {
   min-height: 1px;
   overflow-y: auto;
   height: 100%;
-  @include chat-scrollbar(var(--secondary));
+  @include chat-scrollbar();
 }
 
 .channel-members-view__list-item {

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

@@ -90,34 +90,19 @@
     border: 0;
     resize: none;
     max-height: 125px;
-    scrollbar-color: var(--primary-low-mid) transparent;
-    transition: scrollbar-color 0.2s ease-in-out;
     background: none;
     margin: 0;
     padding: 0.25rem 0.5rem;
     text-overflow: ellipsis;
 
+    @include chat-scrollbar();
+
     &:placeholder-shown,
     &::placeholder {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--primary-low-mid);
-      border-radius: 6px;
-      border: 3px solid var(--secondary);
-    }
-    &:hover {
-      scrollbar-color: var(--primary-low-mid) transparent;
-      &::-webkit-scrollbar-thumb {
-        background-color: var(--primary-low-mid);
-      }
-    }
-    &::-webkit-scrollbar {
-      width: 12px;
-    }
   }
 
   &__unreliable-network {

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

@@ -4,7 +4,7 @@
   height: 100%;
   padding-bottom: env(safe-area-inset-bottom);
   position: relative;
-  @include chat-scrollbar(var(--secondary));
+  @include chat-scrollbar();
 
   @include breakpoint(mobile-large) {
     @include chat-scrollbar();
@@ -69,10 +69,24 @@
     position: relative;
     cursor: pointer;
     color: var(--primary-high);
-    transition: opacity 50ms ease-in;
-    opacity: 1;
+
+    @media (hover: none) {
+      &:hover,
+      &:focus {
+        background: transparent;
+      }
+
+      &:active {
+        background: var(--primary-low);
+      }
+    }
 
     @media (hover: hover) {
+      &:hover,
+      &.active {
+        background: var(--primary-very-low);
+      }
+
       &.can-leave:hover {
         .toggle-channel-membership-button.-leave {
           display: block;
@@ -88,17 +102,8 @@
       }
     }
 
-    .discourse-no-touch &:hover,
-    &.active {
-      background: var(--primary-low);
-    }
-
     &:hover,
     &.active {
-      &.active {
-        font-weight: 600;
-      }
-
       .chat-channel-title {
         &,
         .category-chat-name,

plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss

@@ -4,10 +4,16 @@
     font-size: var(--font-0);
   }
 
+  &.has-scrollbar {
+    .chat-channel-row {
+      margin-right: 0;
+    }
+  }
+
   .chat-channel-row {
     height: 3.6em;
     padding: 0 0.5rem;
-    margin: 0 0 0 0.5rem;
+    margin: 0 0.5rem 0 0.5rem;
 
     &:not(:last-of-type) {
       border-bottom: 1px solid var(--primary-low);

plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss

@@ -1,27 +1,21 @@
-@mixin chat-scrollbar($border: var(--primary-very-low)) {
+@mixin chat-scrollbar() {
   --scrollbarBg: transparent;
   --scrollbarThumbBg: var(--primary-low);
-  --scrollbarWidth: 1.2rem;
+  --scrollbarWidth: 10px;
 
   scrollbar-color: transparent var(--scrollbarBg);
   transition: scrollbar-color 0.25s ease-in-out;
-  transition-delay: 0.5s;
 
   &::-webkit-scrollbar-thumb {
-    background-color: transparent;
+    background-color: var(--scrollbarThumbBg);
     border-radius: calc(var(--scrollbarWidth) / 2);
-    border: calc(var(--scrollbarWidth) / 4) solid transparent;
+    border: calc(var(--scrollbarWidth) / 4) solid var(--secondary);
   }
-  &:hover {
-    &::-webkit-scrollbar-thumb {
-      border: calc(var(--scrollbarWidth) / 4) solid $border;
-    }
-    scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--scrollbarThumbBg);
-    }
-    transition-delay: 0s;
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
   }
+
   &::-webkit-scrollbar {
     width: var(--scrollbarWidth);
   }

plugins/chat/assets/stylesheets/mobile/chat-index.scss

@@ -1,4 +1,5 @@
 @import "common/foundation/mixins";
+
 .full-page-chat {
   overflow: hidden; //prevents double scroll
 
@@ -7,24 +8,14 @@
     padding-bottom: 6rem;
     box-sizing: border-box;
 
-    @media (hover: none) {
-      .chat-channel-row:hover {
-        background: transparent;
-      }
-
-      .chat-channel-row:active {
-        background: var(--primary-low);
-      }
-    }
-
     .channels-list-container {
       background: var(--secondary);
     }
 
     .chat-channel-row {
       height: 4em;
-      margin: 0 1.5rem;
-      padding: 0;
+      margin: 0;
+      padding: 0 1.5rem;
       border-radius: 0;
       border-bottom: 1px solid var(--primary-low);