fix: name max width set 300px

This commit is contained in:
shuai 2023-08-23 15:38:10 +08:00
parent 255f76b06a
commit 1e1258d865
3 changed files with 15 additions and 14 deletions

View File

@ -24,7 +24,7 @@ const Index: FC<Props> = ({
showReputation = true, showReputation = true,
}) => { }) => {
return ( return (
<div className={`text-secondary ${className}`}> <div className={`d-flex align-items-center text-secondary ${className}`}>
{data?.status !== 'deleted' ? ( {data?.status !== 'deleted' ? (
<Link to={`/users/${data?.username}`}> <Link to={`/users/${data?.username}`}>
{showAvatar && ( {showAvatar && (
@ -36,7 +36,9 @@ const Index: FC<Props> = ({
alt={data?.display_name} 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> </Link>
) : ( ) : (
<> <>
@ -49,7 +51,9 @@ const Index: FC<Props> = ({
alt={data?.display_name} 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>
</> </>
)} )}

View File

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

View File

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