From 4e0ec00114a2ca719940e01120f62f06b1a60377 Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Thu, 2 Jul 2026 16:59:56 +0200
Subject: [PATCH] fix(ui): refine Lighthouse chat chart surfaces

---
 .../_components/chat/message-bubble.tsx       |  2 +-
 ui/app/(prowler)/lighthouse/page.tsx          |  4 +-
 ui/styles/globals.css                         | 57 ++++++++++++++++++-
 3 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx
index 54118139c5..3c79e880ab 100644
--- a/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/chat/message-bubble.tsx
@@ -58,7 +58,7 @@ export function MessageBubble({ message }: { message: LighthouseV2Message }) {
           className={cn(
             "max-w-full min-w-0 rounded-[8px] px-4 py-3 text-sm",
             isUser
-              ? "bg-button-primary text-black"
+              ? "bg-button-primary text-slate-950"
               : "bg-bg-neutral-tertiary text-text-neutral-primary",
           )}
         >
diff --git a/ui/app/(prowler)/lighthouse/page.tsx b/ui/app/(prowler)/lighthouse/page.tsx
index 0724e2fa45..47af153e76 100644
--- a/ui/app/(prowler)/lighthouse/page.tsx
+++ b/ui/app/(prowler)/lighthouse/page.tsx
@@ -92,7 +92,9 @@ export default async function AIChatbot({
     return (
       <ContentLayout title="Lighthouse AI" icon={<LighthouseIcon />}>
         <LighthouseV2NavigationModeSync />
-        <div className="h-[calc(100dvh-6.5rem)] min-h-0">
+        {/* [contain:layout] traps streamdown's fixed fullscreen overlay inside
+            the chat area so it never covers the sidebar or navbar. */}
+        <div className="h-[calc(100dvh-6.5rem)] min-h-0 [contain:layout]">
           <LighthouseV2ChatPage
             key={chatRouteKey}
             configurations={configurations}
diff --git a/ui/styles/globals.css b/ui/styles/globals.css
index 2d35e7b4a1..703af92e47 100644
--- a/ui/styles/globals.css
+++ b/ui/styles/globals.css
@@ -323,12 +323,65 @@
     min-width: 0;
   }
 
-  /* !important beats the inline max-width px that mermaid sets on the svg */
-  .lighthouse-markdown [data-streamdown="mermaid-block"] svg {
+  .lighthouse-markdown
+    [data-streamdown="mermaid-block"]
+    > div:first-child
+    .fixed {
+    padding: 1rem !important;
+    background: transparent !important;
+    backdrop-filter: none !important;
+  }
+
+  .lighthouse-markdown
+    [data-streamdown="mermaid-block"]
+    > div:first-child
+    .fixed
+    > [role="presentation"] {
+    box-sizing: border-box;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden;
+    border: 1px solid var(--border-neutral-tertiary);
+    border-radius: 0.75rem;
+    background: var(--bg-neutral-tertiary);
+    backdrop-filter: blur(46px);
+  }
+
+  /* !important beats the inline max-width px that mermaid sets on the svg.
+     Scoped to the inline chart (last child): streamdown renders its
+     fullscreen overlay inside the controls row and sizes it itself. */
+  .lighthouse-markdown [data-streamdown="mermaid-block"] > div:last-child svg {
     max-width: 100% !important;
     height: auto;
   }
 
+  /* Streamdown's fullscreen [&>div]:h-full can stretch the floating
+     pan/zoom controls; keep the pills content-sized and inside the chart. */
+  .lighthouse-markdown
+    [data-streamdown="mermaid-block"]
+    div:has(> div[role="application"])
+    > div:not([role="application"]) {
+    height: auto !important;
+  }
+
+  .lighthouse-markdown
+    [data-streamdown="mermaid-block"]
+    > div:last-child
+    > div:not([role="application"]) {
+    bottom: 0 !important;
+    flex-direction: row !important;
+  }
+
+  .lighthouse-markdown
+    [data-streamdown="mermaid-block"]
+    > div:first-child
+    .fixed
+    [role="presentation"]
+    > div
+    > div:not([role="application"]) {
+    bottom: 3rem !important;
+  }
+
   /* Lighthouse overview banner animated gradient layers */
   .lighthouse-banner-gradient-neutral {
     background: radial-gradient(