diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/src/components/Sidebar.tsx | 6 | ||||
| -rw-r--r-- | 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; |