UX: Tweak last-visit/date separators (#20601)

1. Restore the left margin on both (which reflects the right margin of the scroll bar space)
2. Fix the center alignment of scroll-to-bottom icon
3. Fix the spacing of the `-` character between a date label and "last visit" label
4. Fix the incorrect display the border on date label when at the bottom of viewport

plugins/chat/assets/javascripts/discourse/components/chat-message-separator-date.hbs

@@ -14,7 +14,7 @@
 
         {{#if @message.newest}}
           <span class="chat-message-separator__last-visit">
-            -
+            <span class="chat-message-separator__last-visit-separator">-</span>
             {{i18n "chat.last_visit"}}
           </span>
         {{/if}}

plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-separator-date.js

@@ -16,11 +16,15 @@ export default class ChatTrackMessageSeparatorDate extends Modifier {
 
   modify(element) {
     this.intersectionObserver = new IntersectionObserver(
-      ([event]) => {
-        if (event.isIntersecting && event.intersectionRatio < 1) {
-          event.target.classList.add(IS_PINNED_CLASS);
+      ([entry]) => {
+        if (
+          entry.isIntersecting &&
+          entry.intersectionRatio < 1 &&
+          entry.boundingClientRect.y < entry.intersectionRect.y
+        ) {
+          entry.target.classList.add(IS_PINNED_CLASS);
         } else {
-          event.target.classList.remove(IS_PINNED_CLASS);
+          entry.target.classList.remove(IS_PINNED_CLASS);
         }
       },
       { threshold: [0, 1] }

plugins/chat/assets/stylesheets/common/chat-message-separator.scss

@@ -3,14 +3,15 @@
   display: flex;
 
   &-new {
+    display: flex;
+    justify-content: center;
+    padding: 20px 0 20px 1em;
     position: relative;
-    padding: 20px 0;
 
     .chat-message-separator__text-container {
       text-align: center;
       position: absolute;
       height: 40px;
-      width: 100%;
       box-sizing: border-box;
       z-index: 1;
       top: 0;
@@ -28,20 +29,22 @@
 
     .chat-message-separator__line-container {
       width: 100%;
+    }
 
     .chat-message-separator__line {
       border-top: 1px solid var(--danger-medium);
     }
   }
-  }
 
   &-date {
+    box-sizing: border-box;
     position: absolute;
     width: 100%;
     z-index: 2;
     display: flex;
     align-items: flex-start;
     justify-content: center;
+    padding-left: 1rem;
     pointer-events: none;
 
     &.with-last-visit {
@@ -60,7 +63,7 @@
       &.is-pinned,
       &.is-force-pinned {
         .chat-message-separator__text {
-          border: 1px solid var(--primary-medium);
+          border: 1px solid var(--secondary-high);
           border-radius: 3px;
         }
 
@@ -70,6 +73,14 @@
       }
     }
 
+    .chat-message-separator__last-visit {
+      display: flex;
+    }
+
+    .chat-message-separator__last-visit-separator {
+      margin: 0 0.25rem;
+    }
+
     .chat-message-separator__text {
       @include unselectable;
       background-color: var(--secondary);
@@ -82,7 +93,7 @@
     }
 
     & + .chat-message-separator__line-container {
-      padding: 20px 0;
+      padding: 20px 0 20px 1em;
       box-sizing: border-box;
 
       .chat-message-separator__line {

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

@@ -326,11 +326,13 @@ $float-height: 530px;
   }
 
   .scroll-stick-wrap {
+    display: flex;
+    justify-content: center;
+    margin: 0 1rem;
     position: relative;
   }
 
   .chat-scroll-to-bottom {
-    left: calc(50% - calc(32px / 2));
     align-items: center;
     justify-content: center;
     position: absolute;