From 3bfc957a580e51d8cc05306acd88215e47bbf3b1 Mon Sep 17 00:00:00 2001
From: qianzhu <36325249+syt-honey@users.noreply.github.com>
Date: Fri, 25 Aug 2023 18:38:29 +0800
Subject: [PATCH] refactor(style): refactor user list avatar style

---
 .../src/components/UsersPanel/index.tsx                | 10 ++++++++--
 .../src/components/UsersPanel/style.less               |  7 ++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/flat-components/src/components/UsersPanel/index.tsx b/packages/flat-components/src/components/UsersPanel/index.tsx
index 270f66453de..ae1f0d668f2 100644
--- a/packages/flat-components/src/components/UsersPanel/index.tsx
+++ b/packages/flat-components/src/components/UsersPanel/index.tsx
@@ -163,14 +163,20 @@ const Row = /* @__PURE__ */ observer(function Row({
                     {user.hasLeft ? (
                         <div className="users-panel-list-name-wrapper">
                             <span className="users-panel-list-name">
-                                <span className="users-panel-list-name-content">{user.name}</span>
+                                <span
+                                    className={`users-panel-list-name-content ${isSelf && "is-me"}`}
+                                >
+                                    {user.name}
+                                </span>
                                 {isSelf && <span className="users-panel-is-self">{t("me")}</span>}
                             </span>
                             <span className="users-panel-list-has-left">{t("has-left")}</span>
                         </div>
                     ) : (
                         <span className="users-panel-list-name">
-                            <span className="users-panel-list-name-content">{user.name}</span>
+                            <span className={`users-panel-list-name-content ${isSelf && "is-me"}`}>
+                                {user.name}
+                            </span>
                             {isSelf && <span className="users-panel-is-self">{t("me")}</span>}
                         </span>
                     )}
diff --git a/packages/flat-components/src/components/UsersPanel/style.less b/packages/flat-components/src/components/UsersPanel/style.less
index 6375d4ba663..6d8b37c21ac 100644
--- a/packages/flat-components/src/components/UsersPanel/style.less
+++ b/packages/flat-components/src/components/UsersPanel/style.less
@@ -22,6 +22,7 @@
 
 .users-panel-headline-avatar,
 .users-panel-list-avatar {
+    flex-shrink: 0;
     display: inline-block;
     width: 24px;
     height: 24px;
@@ -132,6 +133,10 @@
     text-overflow: ellipsis;
 }
 
+.users-panel-list-name-content.is-me {
+    max-width: 50px;
+}
+
 .users-panel-list-name {
     display: inline-flex;
     gap: 4px;
@@ -229,4 +234,4 @@
     .users-panel-list-item::after {
         background-color: var(--grey-9);
     }
-}
+}
\ No newline at end of file