FIX: Chat member user card rendered out of view (#20332)

plugins/chat/assets/javascripts/discourse/components/chat-channel-members-view.hbs

@@ -29,15 +29,9 @@
 
       <div role="list" class="channel-members-view__list">
         {{#each this.members as |membership|}}
-          <a
+          <div class="channel-members-view__list-item">
-            class="channel-members-view__list-item"
+            <ChatUserInfo @user={{membership.user}} />
-            href={{membership.user.userPath}}
+          </div>
-            data-user-card={{membership.user.username}}
-            tabindex="0"
-          >
-            <ChatUserAvatar @user={{membership.user}} @avatarSize="medium" />
-            <ChatUserDisplayName @user={{membership.user}} />
-          </a>
         {{else}}
           {{#unless this.isFetchingMembers}}
             {{i18n "chat.channel.no_memberships_found"}}

plugins/chat/assets/javascripts/discourse/components/chat-user-info.hbs

@@ -0,0 +1,8 @@
+{{#if @user}}
+  <a href={{this.userPath}} data-user-card={{@user.username}}>
+    <ChatUserAvatar @user={{@user}} @avatarSize="medium" />
+  </a>
+  <a href={{this.userPath}} data-user-card={{@user.username}}>
+    <ChatUserDisplayName @user={{@user}} />
+  </a>
+{{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-user-info.js

@@ -0,0 +1,8 @@
+import Component from "@glimmer/component";
+import { userPath } from "discourse/lib/url";
+
+export default class ChatUserInfo extends Component {
+  get userPath() {
+    return userPath(this.args.user.username);
+  }
+}

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

@@ -112,9 +112,8 @@ input.channel-members-view__search-input {
   align-items: center;
   padding: 0.5rem 0 0.5rem 1px;
 
-  &:hover {
+  &:not(:last-child) {
-    background-color: var(--tertiary-very-low);
+    border-bottom: 1px solid var(--primary-low);
-    border-radius: 0.25rem;
   }
 
   .chat-user-avatar {

plugins/chat/test/javascripts/components/chat-user-info-test.js

@@ -0,0 +1,24 @@
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import { module, test } from "qunit";
+import { render } from "@ember/test-helpers";
+
+module("Discourse Chat | Component | chat-user-info", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("avatar and name", async function (assert) {
+    this.set("user", this.currentUser);
+
+    await render(hbs`<ChatUserInfo @user={{this.user}} />`);
+
+    assert
+      .dom(`a[data-user-card=${this.user.username}] div.chat-user-avatar`)
+      .exists();
+
+    assert
+      .dom(
+        `a[data-user-card=${this.user.username}] span.chat-user-display-name`
+      )
+      .includesText(this.user.username);
+  });
+});