From 918f76fbeff03c8e40899b32fa2aa3dad7aa94a7 Mon Sep 17 00:00:00 2001
From: Julian Cuni <julian.cuni@microservices.al>
Date: Fri, 19 Jun 2026 17:30:44 +0200
Subject: [PATCH] fix(booth): make the Active Sessions list scrollable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The session list filled to its content height instead of clipping, so a long list
(29 sessions) overflowed the column instead of scrolling — unlike the live feed.

The ActiveSessions Panel sat in a plain block wrapper, so it sized to content and its
inner `h-full overflow-y-auto` had no bounded height to scroll within. Make the wrapper
a flex column and give the Panel `flex-1` so it fills the column; the inner scroll area
is then bounded and scrolls — matching the live-feed treatment.

Verified live (Playwright): the scroll container is now 437px tall over 1118px of
content → scrollable, while the live feed is unchanged.

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
---
 apps/web/src/ActiveSessions.tsx | 2 +-
 apps/web/src/BoothScreen.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/ActiveSessions.tsx b/apps/web/src/ActiveSessions.tsx
index 4ad3544..bc54fe0 100644
--- a/apps/web/src/ActiveSessions.tsx
+++ b/apps/web/src/ActiveSessions.tsx
@@ -71,7 +71,7 @@ export function ActiveSessions({ onPick }: { onPick: (identity: string) => void
           {sessions.length} {t("booth.insideCount")}
         </span>
       }
-      className="min-h-0"
+      className="min-h-0 flex-1"
     >
       <div className="h-full overflow-y-auto pr-1">
         {sessions.length === 0 ? (
diff --git a/apps/web/src/BoothScreen.tsx b/apps/web/src/BoothScreen.tsx
index 84ce6d4..9499d9c 100644
--- a/apps/web/src/BoothScreen.tsx
+++ b/apps/web/src/BoothScreen.tsx
@@ -408,7 +408,7 @@ export function BoothScreen() {
             <div className="text-term-muted">{occQuery.isError ? t("booth.occUnavailable") : t("common.loading")}</div>
           )}
         </Panel>
-        <div className="min-h-0 flex-1">
+        <div className="flex min-h-0 flex-1 flex-col">
           <ActiveSessions onPick={setActiveTicket} />
         </div>
       </div>