✨ feat(settings-faq): improve FAQ table readability with tooltip & text truncation
* Added `Tooltip` component and ellipsis style for “question” & “answer” columns * Keeps table compact while showing full content on hover * Updated success messages punctuation for consistency
This commit is contained in:
@@ -130,7 +130,7 @@ const SettingsAnnouncements = ({ options, refresh }) => {
|
|||||||
dataIndex: 'extra',
|
dataIndex: 'extra',
|
||||||
key: 'extra',
|
key: 'extra',
|
||||||
render: (text) => (
|
render: (text) => (
|
||||||
<Tooltip content={text || '-'} position='topLeft' showArrow>
|
<Tooltip content={text || '-'} showArrow>
|
||||||
<div style={{
|
<div style={{
|
||||||
maxWidth: '200px',
|
maxWidth: '200px',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
|||||||
@@ -8,7 +8,8 @@ import {
|
|||||||
Empty,
|
Empty,
|
||||||
Divider,
|
Divider,
|
||||||
Modal,
|
Modal,
|
||||||
Switch
|
Switch,
|
||||||
|
Tooltip
|
||||||
} from '@douyinfe/semi-ui';
|
} from '@douyinfe/semi-ui';
|
||||||
import {
|
import {
|
||||||
IllustrationNoResult,
|
IllustrationNoResult,
|
||||||
@@ -54,13 +55,17 @@ const SettingsFAQ = ({ options, refresh }) => {
|
|||||||
dataIndex: 'question',
|
dataIndex: 'question',
|
||||||
key: 'question',
|
key: 'question',
|
||||||
render: (text) => (
|
render: (text) => (
|
||||||
<div style={{
|
<Tooltip content={text} showArrow>
|
||||||
maxWidth: '300px',
|
<div style={{
|
||||||
wordBreak: 'break-word',
|
maxWidth: '300px',
|
||||||
fontWeight: 'bold'
|
overflow: 'hidden',
|
||||||
}}>
|
textOverflow: 'ellipsis',
|
||||||
{text}
|
whiteSpace: 'nowrap',
|
||||||
</div>
|
fontWeight: 'bold'
|
||||||
|
}}>
|
||||||
|
{text}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -68,14 +73,17 @@ const SettingsFAQ = ({ options, refresh }) => {
|
|||||||
dataIndex: 'answer',
|
dataIndex: 'answer',
|
||||||
key: 'answer',
|
key: 'answer',
|
||||||
render: (text) => (
|
render: (text) => (
|
||||||
<div style={{
|
<Tooltip content={text} showArrow>
|
||||||
maxWidth: '400px',
|
<div style={{
|
||||||
wordBreak: 'break-word',
|
maxWidth: '400px',
|
||||||
whiteSpace: 'pre-wrap',
|
overflow: 'hidden',
|
||||||
color: 'var(--semi-color-text-1)'
|
textOverflow: 'ellipsis',
|
||||||
}}>
|
whiteSpace: 'nowrap',
|
||||||
{text}
|
color: 'var(--semi-color-text-1)'
|
||||||
</div>
|
}}>
|
||||||
|
{text}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user