Commit 49458a3a by t0ng7u

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
parent ff85dfd8
......@@ -130,7 +130,7 @@ const SettingsAnnouncements = ({ options, refresh }) => {
dataIndex: 'extra',
key: 'extra',
render: (text) => (
<Tooltip content={text || '-'} position='topLeft' showArrow>
<Tooltip content={text || '-'} showArrow>
<div style={{
maxWidth: '200px',
overflow: 'hidden',
......
......@@ -8,7 +8,8 @@ import {
Empty,
Divider,
Modal,
Switch
Switch,
Tooltip
} from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
......@@ -54,13 +55,17 @@ const SettingsFAQ = ({ options, refresh }) => {
dataIndex: 'question',
key: 'question',
render: (text) => (
<Tooltip content={text} showArrow>
<div style={{
maxWidth: '300px',
wordBreak: 'break-word',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontWeight: 'bold'
}}>
{text}
</div>
</Tooltip>
)
},
{
......@@ -68,14 +73,17 @@ const SettingsFAQ = ({ options, refresh }) => {
dataIndex: 'answer',
key: 'answer',
render: (text) => (
<Tooltip content={text} showArrow>
<div style={{
maxWidth: '400px',
wordBreak: 'break-word',
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
color: 'var(--semi-color-text-1)'
}}>
{text}
</div>
</Tooltip>
)
},
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment