From 701516bc8ba2d4a8018a9ab0cdc50603ef03dfce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sun, 5 Apr 2026 22:01:06 +0100
Subject: [PATCH] fix(web): mesh-stream wheel-scroll trap on landing page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The demo-dashboard embedded MeshStream with a fixed min-h-[480px] grid
+ overflow-y-auto on the message <ol>. Browsers capture every wheel
event that fires over a scrollable container — so hovering the demo
section froze page scroll until the user moved the cursor off.

Landing demo has only 6 messages, never needs internal scroll. The
fixed viewport only makes sense in the live dashboard where envelope
count can exceed the box.

Added `scrollable?: boolean` prop to MeshStream (default false).
- demo-dashboard (landing): no prop → intrinsic height, no overflow,
  wheel events propagate to the page
- live-stream-panel (/dashboard/meshes/[id]/live): scrollable → keeps
  the chat-style fixed viewport with scroll

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../modules/marketing/home/mesh-stream.tsx    | 22 +++++++++++++++++--
 .../src/modules/mesh/live-stream-panel.tsx    |  1 +
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/modules/marketing/home/mesh-stream.tsx b/apps/web/src/modules/marketing/home/mesh-stream.tsx
index 1a1e21b..55d0402 100644
--- a/apps/web/src/modules/marketing/home/mesh-stream.tsx
+++ b/apps/web/src/modules/marketing/home/mesh-stream.tsx
@@ -121,6 +121,13 @@ export interface MeshStreamProps {
   emptyLabel?: string;
   /** footer content (stats / progress bar / timers) */
   footer?: React.ReactNode;
+  /**
+   * When true (live dashboard), the message list gets a fixed viewport
+   * with overflow-y-auto — standard chat UI. When false (landing demo),
+   * the list grows intrinsically so wheel events pass through to the
+   * page scroll instead of being captured by the list.
+   */
+  scrollable?: boolean;
 }
 
 export const MeshStream = ({
@@ -130,6 +137,7 @@ export const MeshStream = ({
   peersHint,
   emptyLabel = "Waiting for messages…",
   footer,
+  scrollable = false,
 }: MeshStreamProps) => {
   const [focusedPeer, setFocusedPeer] = useState<string | null>(null);
   const [hoveredKey, setHoveredKey] = useState<string | null>(null);
@@ -140,7 +148,12 @@ export const MeshStream = ({
     : messages;
 
   return (
-    <div className="grid min-h-[480px] grid-cols-1 md:grid-cols-[220px_1fr]">
+    <div
+      className={
+        "grid grid-cols-1 md:grid-cols-[220px_1fr] " +
+        (scrollable ? "min-h-[480px]" : "")
+      }
+    >
       {/* peers sidebar */}
       <aside
         className="border-b border-[var(--cm-border)] bg-[var(--cm-bg-elevated)]/20 p-4 md:border-b-0 md:border-r"
@@ -239,7 +252,12 @@ export const MeshStream = ({
               : "all peers · E2E encrypted"}
           </span>
         </div>
-        <ol className="flex-1 space-y-3 overflow-y-auto p-4">
+        <ol
+          className={
+            "space-y-3 p-4 " +
+            (scrollable ? "flex-1 overflow-y-auto" : "")
+          }
+        >
           {filtered.length === 0 && (
             <li
               className="py-8 text-center text-[13px] text-[var(--cm-fg-tertiary)]"
diff --git a/apps/web/src/modules/mesh/live-stream-panel.tsx b/apps/web/src/modules/mesh/live-stream-panel.tsx
index d6009bc..10e763b 100644
--- a/apps/web/src/modules/mesh/live-stream-panel.tsx
+++ b/apps/web/src/modules/mesh/live-stream-panel.tsx
@@ -114,6 +114,7 @@ export const LiveStreamPanel = ({ meshId }: { meshId: string }) => {
         channelLabel="live-stream"
         emptyLabel={emptyLabel}
         footer={footer}
+        scrollable
       />
     </div>
   );