From 8290e16b2d8dafafa1537f0d62d30b8330528e54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Mon, 16 Mar 2026 11:10:58 +0100
Subject: [PATCH] fix: chat panel doesn't overlap main content, links use
 client-side nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layout: main content gets mr-96 (margin-right) when chat is open,
pushing the page content left so the chat panel sits alongside it
without overlapping. Smooth 300ms transition.

ChatPanel: internal links (/products/..., /orders/...) now use
React Router navigate() instead of target="_blank" — clicking a
product link in the chat navigates without reloading the page,
keeping the chat panel open.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/chat/ChatPanel.tsx | 10 +++++++++-
 frontend/src/components/layout/Layout.tsx  |  4 ++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/chat/ChatPanel.tsx b/frontend/src/components/chat/ChatPanel.tsx
index 5089264..b46bf2e 100644
--- a/frontend/src/components/chat/ChatPanel.tsx
+++ b/frontend/src/components/chat/ChatPanel.tsx
@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { MessageSquare, Send, Loader2, X, Plus, Bot, User } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
@@ -37,6 +38,7 @@ export default function ChatPanel({ open, onClose, contextType, contextId }: Cha
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const queryClient = useQueryClient()
+  const navigate = useNavigate()
 
   // Load sessions
   const { data: sessions } = useQuery({
@@ -251,7 +253,13 @@ export default function ChatPanel({ open, onClose, contextType, contextId }: Cha
                         ol: ({ children }) => <ol className="list-decimal list-inside mb-1 space-y-0.5">{children}</ol>,
                         li: ({ children }) => <li>{children}</li>,
                         code: ({ children }) => <code className="px-1 py-0.5 rounded text-xs font-mono" style={{ backgroundColor: 'var(--color-bg-muted)' }}>{children}</code>,
-                        a: ({ href, children }) => <a href={href} target="_blank" rel="noopener noreferrer" className="text-accent underline hover:text-accent-hover">{children}</a>,
+                        a: ({ href, children }) => {
+                          const isInternal = href?.startsWith('/products/') || href?.startsWith('/orders/')
+                          if (isInternal) {
+                            return <a href={href} onClick={(e) => { e.preventDefault(); navigate(href!) }} className="text-accent underline hover:text-accent-hover cursor-pointer">{children}</a>
+                          }
+                          return <a href={href} target="_blank" rel="noopener noreferrer" className="text-accent underline hover:text-accent-hover">{children}</a>
+                        },
                         img: ({ src, alt }) => <img src={src} alt={alt || 'render'} className="max-w-full rounded-lg mt-1 mb-1 border border-border-default" style={{ maxHeight: '200px' }} />,
                       }}
                     >
diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx
index ab52e18..2b4cd85 100644
--- a/frontend/src/components/layout/Layout.tsx
+++ b/frontend/src/components/layout/Layout.tsx
@@ -254,8 +254,8 @@ export default function Layout() {
         </div>
       </aside>
 
-      {/* Main content */}
-      <main className="flex-1 overflow-auto min-w-0 pt-12 md:pt-0">
+      {/* Main content — shrinks when chat panel is open */}
+      <main className={`flex-1 overflow-auto min-w-0 pt-12 md:pt-0 transition-all duration-300 ${chatOpen ? 'mr-96' : ''}`}>
         <Outlet />
       </main>