fix: long name style changed

Author: shuai

ui/src/components/BaseUserCard/index.tsx

@@ -12,6 +12,7 @@ interface Props {
   avatarSearchStr?: string;
   className?: string;
   avatarClass?: string;
+  nameMaxWidth?: string;
 }
 
 const Index: FC<Props> = ({
@@ -22,11 +23,14 @@ const Index: FC<Props> = ({
   className = 'small',
   avatarSearchStr = 's=48',
   showReputation = true,
+  nameMaxWidth = '300px',
 }) => {
   return (
     <div className={`d-flex align-items-center  text-secondary ${className}`}>
       {data?.status !== 'deleted' ? (
-        <Link to={`/users/${data?.username}`}>
+        <Link
+          to={`/users/${data?.username}`}
+          className="d-flex align-items-center">
           {showAvatar && (
             <Avatar
               avatar={data?.avatar}
@@ -36,7 +40,9 @@ const Index: FC<Props> = ({
               alt={data?.display_name}
             />
           )}
-          <span className="me-1 text-truncate-1" style={{ maxWidth: '300px' }}>
+          <span
+            className="me-1 name-ellipsis"
+            style={{ maxWidth: nameMaxWidth }}>
             {data?.display_name}
           </span>
         </Link>
@@ -51,9 +57,7 @@ const Index: FC<Props> = ({
               alt={data?.display_name}
             />
           )}
-          <span className="me-1 text-truncate-1" style={{ maxWidth: '300px' }}>
-            {data?.display_name}
-          </span>
+          <span className="me-1 name-ellipsis">{data?.display_name}</span>
         </>
       )}
 

ui/src/index.scss

@@ -141,6 +141,13 @@ img[src=""] {
   }
 }
 
+.name-ellipsis {
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 .text-truncate-1,
 .text-truncate-2,
 .text-truncate-3,

ui/src/pages/Admin/Answers/index.tsx

@@ -155,7 +155,7 @@ const Answers: FC = () => {
                 <td>{li.vote_count}</td>
                 <td>
                   <Stack>
-                    <BaseUserCard data={li.user_info} />
+                    <BaseUserCard data={li.user_info} nameMaxWidth="200px" />
 
                     <FormatTime
                       className="small text-secondary"

ui/src/pages/Admin/Questions/index.tsx

@@ -160,7 +160,7 @@ const Questions: FC = () => {
                 </td>
                 <td>
                   <Stack>
-                    <BaseUserCard data={li.user_info} />
+                    <BaseUserCard data={li.user_info} nameMaxWidth="130px" />
                     <FormatTime
                       className="small text-secondary"
                       time={li.create_time}

ui/src/pages/Admin/Users/index.tsx

@@ -254,6 +254,7 @@ const Users: FC = () => {
                     avatarSearchStr="s=48"
                     avatarClass="me-2"
                     showReputation={false}
+                    nameMaxWidth="160px"
                   />
                 </td>
                 <td>{formatCount(user.rank)}</td>