From 135a93993b3df06f2b772b5be1882e84ec5ea877 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sat, 31 May 2025 03:19:18 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(Playground):=20Fix=20thinkin?=
 =?UTF-8?q?g=20section=20scroll=20issue=20and=20clean=20up=20unused=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix thinking content area scroll functionality in MessageContent.js
  * Replace max-h-50 with explicit maxHeight style (200px)
  * Add thinking-content-scroll CSS class for proper scrollbar styling
  * Ensure scrollbars are visible when content exceeds container height
- Add thinking-content-scroll CSS class in index.css
  * Define webkit scrollbar styles with proper dimensions (6px)
  * Add hover effects and cross-browser compatibility
  * Support both webkit and Firefox scrollbar styling
- Remove unused CSS classes to improve code cleanliness
  * Remove .hide-on-mobile class (no usage found in codebase)
  * Remove .debug-code class (no longer needed)
- Improve user experience for viewing lengthy thinking content
  * Users can now properly scroll through AI reasoning content
  * Maintains content visibility with appropriate height constraints

Resolves issue where thinking section had max height but no scrolling capability.
---
 .../components/playground/MessageContent.js   | 10 +++++-
 web/src/index.css                             | 36 +++++++++++++------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/web/src/components/playground/MessageContent.js b/web/src/components/playground/MessageContent.js
index 6d0e3974..77b10c5a 100644
--- a/web/src/components/playground/MessageContent.js
+++ b/web/src/components/playground/MessageContent.js
@@ -215,7 +215,15 @@ const MessageContent = ({
           >
             {message.isReasoningExpanded && (
               <div className="p-3 sm:p-5 pt-2 sm:pt-4">
-                <div className="bg-white/70 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 shadow-inner overflow-x-auto max-h-50 overflow-y-auto">
+                <div
+                  className="bg-white/70 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 shadow-inner overflow-x-auto overflow-y-auto thinking-content-scroll"
+                  style={{
+                    maxHeight: '200px',
+                    minHeight: '100px',
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: 'rgba(0, 0, 0, 0.3) transparent'
+                  }}
+                >
                   <div className="prose prose-xs sm:prose-sm prose-purple max-w-none text-xs sm:text-sm">
                     <MarkdownRenderer
                       content={finalExtractedThinkingContent}
diff --git a/web/src/index.css b/web/src/index.css
index d362dc0f..eb5c0705 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -74,11 +74,6 @@ body {
     height: 100% !important;
   }
 
-  /* 隐藏在移动设备上 */
-  .hide-on-mobile {
-    display: none !important;
-  }
-
   .semi-table-tbody,
   .semi-table-row,
   .semi-table-row-cell {
@@ -86,10 +81,12 @@ body {
     width: auto !important;
     padding: 2px !important;
   }
+
   .semi-table-row-cell {
     border-bottom: 0 !important;
   }
-  .semi-table-tbody > .semi-table-row {
+
+  .semi-table-tbody>.semi-table-row {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
 }
@@ -217,11 +214,28 @@ code {
   scrollbar-width: none;
 }
 
-/* 调试面板代码样式 */
-.debug-code {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 11px;
-  line-height: 1.4;
+/* 思考内容区域滚动条样式 */
+.thinking-content-scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.thinking-content-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.thinking-content-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.thinking-content-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.thinking-content-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
 }
 
 /* 调试面板标签样式 */