From fbb0eebbbf5641b8eac4556dc553682b442c174f Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Wed, 24 Dec 2025 13:44:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layouts/MainlineTimelineView.js           | 28 ++-------------
 .../SearchFilters/CompactSearchBox.css        | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
index c8b77c52..c05296ec 100644
--- a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
+++ b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
@@ -935,31 +935,7 @@ const MainlineTimelineViewComponent = forwardRef(
         </Flex>
 
         {/* 横向滚动容器 - 滚动条在卡片上方 */}
-        <Box
-          overflowX="scroll"
-          overflowY="visible"
-          pb={2}
-          sx={{
-            "&::-webkit-scrollbar": {
-              height: "10px",
-              display: "block",
-            },
-            "&::-webkit-scrollbar-track": {
-              background: COLORS.scrollbarTrackBg,
-              borderRadius: "5px",
-            },
-            "&::-webkit-scrollbar-thumb": {
-              background: COLORS.scrollbarThumbBg,
-              borderRadius: "5px",
-              minWidth: "40px",
-            },
-            "&::-webkit-scrollbar-thumb:hover": {
-              background: COLORS.scrollbarThumbHoverBg,
-            },
-            scrollbarWidth: "thin",
-            scrollbarColor: `${COLORS.scrollbarThumbBg} ${COLORS.scrollbarTrackBg}`,
-          }}
-        >
+        <Box className="mainline-scroll-container" pb={2}>
           {/* 主线卡片横向排列容器 */}
           <HStack
             spacing={3}
@@ -967,7 +943,7 @@ const MainlineTimelineViewComponent = forwardRef(
             pt={1}
             align="stretch"
             display="inline-flex"
-            minW="max-content"
+            w="max-content"
           >
             {mainlines.map((mainline) => {
               const groupId =
diff --git a/src/views/Community/components/SearchFilters/CompactSearchBox.css b/src/views/Community/components/SearchFilters/CompactSearchBox.css
index c586e76d..01ac13cf 100644
--- a/src/views/Community/components/SearchFilters/CompactSearchBox.css
+++ b/src/views/Community/components/SearchFilters/CompactSearchBox.css
@@ -105,3 +105,37 @@
     color: #a0aec0 !important;
     font-size: 12px !important;
 }
+
+/* ==================== 主线视图横向滚动条 ==================== */
+
+.mainline-scroll-container {
+    overflow-x: scroll !important;
+    overflow-y: visible !important;
+    -webkit-overflow-scrolling: touch;
+}
+
+.mainline-scroll-container::-webkit-scrollbar {
+    height: 10px !important;
+    display: block !important;
+}
+
+.mainline-scroll-container::-webkit-scrollbar-track {
+    background: #2d3748 !important;
+    border-radius: 5px !important;
+}
+
+.mainline-scroll-container::-webkit-scrollbar-thumb {
+    background: #718096 !important;
+    border-radius: 5px !important;
+    min-width: 40px !important;
+}
+
+.mainline-scroll-container::-webkit-scrollbar-thumb:hover {
+    background: #a0aec0 !important;
+}
+
+/* Firefox 滚动条 */
+.mainline-scroll-container {
+    scrollbar-width: thin;
+    scrollbar-color: #718096 #2d3748;
+}