From b842baf21fcbd86351736af09d6fb49d6153ca90 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sat, 21 Jun 2025 22:03:14 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(settings-faq):=20improve=20FAQ?=
 =?UTF-8?q?=20table=20readability=20with=20tooltip=20&=20text=20truncation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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
---
 .../Dashboard/SettingsAnnouncements.js        |  2 +-
 .../pages/Setting/Dashboard/SettingsFAQ.js    | 40 +++++++++++--------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/web/src/pages/Setting/Dashboard/SettingsAnnouncements.js b/web/src/pages/Setting/Dashboard/SettingsAnnouncements.js
index dfbad8ee..4bcc4e95 100644
--- a/web/src/pages/Setting/Dashboard/SettingsAnnouncements.js
+++ b/web/src/pages/Setting/Dashboard/SettingsAnnouncements.js
@@ -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',
diff --git a/web/src/pages/Setting/Dashboard/SettingsFAQ.js b/web/src/pages/Setting/Dashboard/SettingsFAQ.js
index 0e029e13..8318be76 100644
--- a/web/src/pages/Setting/Dashboard/SettingsFAQ.js
+++ b/web/src/pages/Setting/Dashboard/SettingsFAQ.js
@@ -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) => (
-        <div style={{
-          maxWidth: '300px',
-          wordBreak: 'break-word',
-          fontWeight: 'bold'
-        }}>
-          {text}
-        </div>
+        <Tooltip content={text} showArrow>
+          <div style={{
+            maxWidth: '300px',
+            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) => (
-        <div style={{
-          maxWidth: '400px',
-          wordBreak: 'break-word',
-          whiteSpace: 'pre-wrap',
-          color: 'var(--semi-color-text-1)'
-        }}>
-          {text}
-        </div>
+        <Tooltip content={text} showArrow>
+          <div style={{
+            maxWidth: '400px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            color: 'var(--semi-color-text-1)'
+          }}>
+            {text}
+          </div>
+        </Tooltip>
       )
     },
     {