From d2b47969da2484a17027826d4e5be376bee8cba4 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 15 Jun 2025 03:28:06 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20hide=20announcement=20m?=
 =?UTF-8?q?odal=20scrollbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve UX by hiding the vertical scrollbar inside the announcement (NoticeModal)
while keeping the content scrollable.

Changes
• NoticeModal.js
  - Introduce `notice-content-scroll` class to the content wrapper.
  - Remove inline custom scrollbar styling for cleaner code.

• index.css
  - Add `.notice-content-scroll` to the global hidden-scrollbar rules, ensuring
    scrollbars are hidden across browsers.

Result
Users can still scroll through long announcements, but no scrollbar is shown,
giving the modal a cleaner and more consistent appearance.
---
 web/src/components/layout/NoticeModal.js |  6 +-----
 web/src/index.css                        | 20 +++++++++++---------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/web/src/components/layout/NoticeModal.js b/web/src/components/layout/NoticeModal.js
index 9bb062a1..1bbaa554 100644
--- a/web/src/components/layout/NoticeModal.js
+++ b/web/src/components/layout/NoticeModal.js
@@ -64,11 +64,7 @@ const NoticeModal = ({ visible, onClose, isMobile }) => {
     return (
       <div
         dangerouslySetInnerHTML={{ __html: noticeContent }}
-        className="max-h-[60vh] overflow-y-auto pr-2"
-        style={{
-          scrollbarWidth: 'thin',
-          scrollbarColor: 'var(--semi-color-tertiary) transparent'
-        }}
+        className="notice-content-scroll max-h-[60vh] overflow-y-auto pr-2"
       />
     );
   };
diff --git a/web/src/index.css b/web/src/index.css
index bb6c3b48..c1254fcc 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -375,23 +375,25 @@ code {
 }
 
 /* 隐藏卡片内容区域的滚动条 */
-.card-content-scroll::-webkit-scrollbar,
-.model-settings-scroll::-webkit-scrollbar,
-.thinking-content-scroll::-webkit-scrollbar,
-.custom-request-textarea .semi-input::-webkit-scrollbar,
-.custom-request-textarea textarea::-webkit-scrollbar {
-  display: none;
-}
-
 .card-content-scroll,
 .model-settings-scroll,
 .thinking-content-scroll,
 .custom-request-textarea .semi-input,
-.custom-request-textarea textarea {
+.custom-request-textarea textarea,
+.notice-content-scroll {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
 
+.card-content-scroll::-webkit-scrollbar,
+.model-settings-scroll::-webkit-scrollbar,
+.thinking-content-scroll::-webkit-scrollbar,
+.custom-request-textarea .semi-input::-webkit-scrollbar,
+.custom-request-textarea textarea::-webkit-scrollbar,
+.notice-content-scroll::-webkit-scrollbar {
+  display: none;
+}
+
 /* 图片列表滚动条样式 */
 .image-list-scroll::-webkit-scrollbar {
   width: 6px;