UX: Fix chat separator alignment (#20669)

Also: work around 1px svg shift in scroll-to-bottom button

app/assets/stylesheets/wcag.scss

@@ -8,16 +8,15 @@
 }
 
 html.discourse-no-touch {
-  .btn-default:not(.btn-flat, .btn-danger, .btn-primary),
-  .btn-icon:not(.btn-flat, .btn-danger, .btn-primary) {
+  .btn-default:not(.btn-flat),
+  .btn-icon:not(.btn-flat) {
     &.btn-default {
       .d-icon {
         color: var(--primary-medium);
       }
     }
     &:hover,
-    &.btn-hover,
-    &:focus {
+    &.btn-hover {
       .d-icon {
         color: var(--secondary);
       }
@@ -28,7 +27,7 @@ html.discourse-no-touch {
   }
   .btn-icon.ok,
   .btn-icon.cancel,
-  .btn-danger:not(.btn-flat) {
+  .btn-danger {
     .d-icon {
       color: var(--secondary);
     }
@@ -43,10 +42,6 @@ html.discourse-no-touch {
       }
     }
   }
-
-  .select-kit.single-select .select-kit-header:focus {
-    border-color: var(--primary-medium);
-  }
 }
 
 html {

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

@@ -613,6 +613,7 @@ export default class ChatLivePane extends Component {
       const message = ChatMessage.create(this.args.channel, data.chat_message);
       this.args.channel.addMessages([message]);
       this.scrollToLatestMessage();
+      this.updateLastReadMessage();
     } else {
       // If we are almost at the bottom, we append the message and notice the user
       const message = ChatMessage.create(this.args.channel, data.chat_message);
@@ -895,16 +896,19 @@ export default class ChatLivePane extends Component {
   @action
   editLastMessageRequested() {
     const lastUserMessage = this.args.channel.messages.findLast(
-      (message) =>
-        message.user.id === this.currentUser.id &&
-        !message.staged &&
-        !message.error
+      (message) => message.user.id === this.currentUser.id
     );
 
-    if (lastUserMessage) {
-      this.editingMessage = lastUserMessage;
-      this._focusComposer();
+    if (!lastUserMessage) {
+      return;
     }
+
+    if (lastUserMessage.staged || lastUserMessage.error) {
+      return;
+    }
+
+    this.editingMessage = lastUserMessage;
+    this._focusComposer();
   }
 
   @action

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

@@ -384,6 +384,7 @@ $float-height: 530px;
 
       .d-icon {
         color: var(--secondary);
+        margin-left: 1px; // "fixes" the 1px svg shift
       }
     }
 

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

@@ -56,7 +56,9 @@
     }
 
     .chat-message-separator__text-container {
-      padding-top: 7px;
+      align-items: center;
+      display: flex;
+      height: 40px;
       position: sticky;
       top: -1px;
 
@@ -98,11 +100,7 @@
 
       .chat-message-separator__line {
         border-top: 1px solid var(--secondary-high);
-        left: 0;
         margin: 0 0 -1px;
-        position: relative;
-        right: 0;
-        top: -1px;
       }
     }
   }

plugins/chat/spec/system/shortcuts/chat_composer_spec.rb

@@ -70,5 +70,19 @@ RSpec.describe "Shortcuts | chat composer", type: :system, js: true do
 
       expect(page.find(".chat-composer-message-details")).to have_content(message_1.message)
     end
+
+    context "when last message is not editable" do
+      after { page.driver.browser.network_conditions = { offline: false } }
+
+      it "does not edit a message" do
+        chat.visit_channel(channel_1)
+        page.driver.browser.network_conditions = { offline: true }
+        channel_page.send_message("Hello world")
+
+        find(".chat-composer-input").send_keys(:arrow_up)
+
+        expect(page).to have_no_css(".chat-composer-message-details")
+      end
+    end
   end
 end