Merge pull request #481 from answerdev/feat/1.1.2/ui

fix: optimize the user name is too long

Author: dashuai

ui/src/components/Counts/index.tsx

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

ui/src/components/QuestionList/index.tsx

@@ -84,8 +84,10 @@ 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">
-                  <div className="d-flex">
+                <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">
                     <BaseUserCard
                       data={li.operator}
                       showAvatar={false}
@@ -105,7 +107,7 @@ const QuestionList: FC<Props> = ({
                       views: li.view_count,
                     }}
                     isAccepted={li.accepted_answer_id >= 1}
-                    className="ms-0 ms-md-3 mt-2 mt-md-0"
+                    className="justify-content-start-end justify-content-md-end flex-fill"
                   />
                 </div>
                 <div className="question-tags m-n1">