fix: name max width set 300px

Author: shuai

ui/src/components/BaseUserCard/index.tsx

@@ -24,7 +24,7 @@ const Index: FC<Props> = ({
   showReputation = true,
 }) => {
   return (
-    <div className={`text-secondary ${className}`}>
+    <div className={`d-flex align-items-center  text-secondary ${className}`}>
       {data?.status !== 'deleted' ? (
         <Link to={`/users/${data?.username}`}>
           {showAvatar && (
@@ -36,7 +36,9 @@ const Index: FC<Props> = ({
               alt={data?.display_name}
             />
           )}
-          <span className="me-1 text-break">{data?.display_name}</span>
+          <span className="me-1 text-truncate-1" style={{ maxWidth: '300px' }}>
+            {data?.display_name}
+          </span>
         </Link>
       ) : (
         <>
@@ -49,7 +51,9 @@ const Index: FC<Props> = ({
               alt={data?.display_name}
             />
           )}
-          <span className="me-1 text-break">{data?.display_name}</span>
+          <span className="me-1 text-truncate-1" style={{ maxWidth: '300px' }}>
+            {data?.display_name}
+          </span>
         </>
       )}
 

ui/src/components/Counts/index.tsx

@@ -30,10 +30,9 @@ const Index: FC<Props> = ({
   const { t } = useTranslation('translation', { keyPrefix: 'counts' });
 
   return (
-    <div
-      className={classname('d-flex align-items-center flex-wrap', className)}>
+    <div className={classname('d-flex align-items-center', className)}>
       {showVotes && (
-        <div className="d-flex align-items-center flex-shrink-0">
+        <div className="d-flex align-items-center">
           <Icon name="hand-thumbs-up-fill me-1" />
           <span>
             {data.votes} {t('votes')}
@@ -42,15 +41,15 @@ const Index: FC<Props> = ({
       )}
 
       {showAccepted && (
-        <div className="d-flex align-items-center ms-3 text-success flex-shrink-0">
+        <div className="d-flex align-items-center ms-3 text-success">
           <Icon name="check-circle-fill me-1" />
           <span>{t('accepted')}</span>
         </div>
       )}
 
       {showAnswers && (
         <div
-          className={`d-flex align-items-center ms-3 flex-shrink-0 ${
+          className={`d-flex align-items-center ms-3 ${
             isAccepted ? 'text-success' : ''
           }`}>
           {isAccepted ? (
@@ -64,7 +63,7 @@ const Index: FC<Props> = ({
         </div>
       )}
       {showViews && (
-        <span className="summary-stat ms-3 flex-shrink-0">
+        <span className="summary-stat ms-3">
           <Icon name="eye-fill" />
           <em className="fst-normal ms-1">
             {data.views} {t('views')}

ui/src/components/QuestionList/index.tsx

@@ -84,10 +84,8 @@ const QuestionList: FC<Props> = ({
                     {li.status === 2 ? ` [${t('closed')}]` : ''}
                   </NavLink>
                 </h5>
-                <div
-                  className="d-flex flex-column flex-md-row align-items-md-center small mb-2 text-secondary flex-wrap"
-                  style={{ gap: '0.5rem' }}>
-                  <div className="d-flex flex-shrink-0 me-0 me-md-3 flex-nowrap">
+                <div className="d-flex flex-column flex-md-row align-items-md-center small mb-2 text-secondary">
+                  <div className="d-flex flex-nowrap">
                     <BaseUserCard
                       data={li.operator}
                       showAvatar={false}
@@ -107,7 +105,7 @@ const QuestionList: FC<Props> = ({
                       views: li.view_count,
                     }}
                     isAccepted={li.accepted_answer_id >= 1}
-                    className="justify-content-start-end justify-content-md-end flex-fill"
+                    className="ms-0 ms-md-3 mt-2 mt-md-0"
                   />
                 </div>
                 <div className="question-tags m-n1">