From 942749ef10851bf74d068851e6added89bea5900 Mon Sep 17 00:00:00 2001
From: YurenHao0426 <blackhao0426@gmail.com>
Date: Fri, 13 Feb 2026 19:36:39 +0000
Subject: Fix expanded response view dark mode and KaTeX scrollbar styling

- Add dark mode background/text/border to response modal
- Add prose-invert to expanded response markdown container
- Style katex-display with thin transparent-track scrollbar for overflow formulas

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Sidebar.tsx |  6 +++---
 frontend/src/index.css              | 25 +++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index f114151..079b4d5 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -2180,11 +2180,11 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => {
       {isModalOpen && selectedNode && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setIsModalOpen(false)}>
           <div 
-            className="bg-white rounded-lg shadow-2xl w-[80vw] max-w-4xl max-h-[80vh] flex flex-col"
+            className={`rounded-lg shadow-2xl w-[80vw] max-w-4xl max-h-[80vh] flex flex-col ${isDark ? 'bg-gray-800 text-gray-100' : 'bg-white text-gray-900'}`}
             onClick={(e) => e.stopPropagation()}
           >
             {/* Modal Header */}
-            <div className="flex items-center justify-between p-4 border-b border-gray-200">
+            <div className={`flex items-center justify-between p-4 border-b ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
               <h3 className="font-semibold text-lg">{selectedNode.data.label} - Response</h3>
               <div className="flex gap-2">
                 {!isEditing && (
@@ -2213,7 +2213,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => {
                   className="w-full h-full min-h-[400px] border border-gray-300 rounded-md p-3 text-sm font-mono focus:ring-2 focus:ring-blue-500 resize-y"
                 />
               ) : (
-                <div className="prose prose-sm max-w-none">
+                <div className={`prose prose-sm max-w-none ${isDark ? 'prose-invert' : ''}`}>
                   <ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex]}>{preprocessLaTeX(selectedNode.data.response || '')}</ReactMarkdown>
                 </div>
               )}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 16d39fe..8bf2bbd 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -181,6 +181,31 @@ html, body, #root {
   accent-color: var(--accent-blue);
 }
 
+/* Allow long math formulas to scroll horizontally */
+.katex-display {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
+.katex-display::-webkit-scrollbar {
+  height: 4px;
+}
+
+.katex-display::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.katex-display::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.5);
+  border-radius: 2px;
+}
+
+.katex-display::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.8);
+}
+
 /* Hide the selection box that wraps selected nodes */
 .react-flow__nodesselection-rect {
   display: none !important;
-- 
cgit v1.2.3