From 5cc379417b550a56e47dddb17725e187db9b5d09 Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Thu, 1 Oct 2026 22:31:35 +0200
Subject: [PATCH] Stacked layout: the chat keeps about five lines under a
 stream

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/ui/Chat.svelte       | 4 +++-
 src/ui/VoiceStage.svelte | 9 +++++----
 test/e2e/share.e2e.ts    | 8 ++++++++
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/ui/Chat.svelte b/src/ui/Chat.svelte
index e081a8d..bc5dfc3 100644
--- a/src/ui/Chat.svelte
+++ b/src/ui/Chat.svelte
@@ -18,7 +18,7 @@
   });
 </script>
 
-<section class="chat" aria-label="Chat">
+<section class="chat" class:video-only={videoOnly} aria-label="Chat">
   <header>
     {#if showMenu}<button class="icon-btn" onclick={onmenu} aria-label="Open channels"><Icon name="menu" /></button>{/if}
     <Icon name={isDm ? 'message' : 'hash'} size={20} />
@@ -74,6 +74,8 @@
 </section>
 
 <style>
+  /* Stacked layout: room for about five lines of chat whatever the stream above takes */
+  .chat.video-only :global(.wrap[role=log]) { min-height: 124px; flex-shrink: 0; }
   .chat { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-2); }
   header { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); color: var(--text-dim); }
   h1 { flex: 0 1 auto; max-width: 60%; font-size: 16px; margin: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
diff --git a/src/ui/VoiceStage.svelte b/src/ui/VoiceStage.svelte
index ced80b2..5f39ee8 100644
--- a/src/ui/VoiceStage.svelte
+++ b/src/ui/VoiceStage.svelte
@@ -350,10 +350,11 @@
   .away { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 13px; }
   .vol { width: 110px; flex: none; padding: 0; }
   /* Video only: the picture as wide as the chat, as tall as its shape asks */
-  .stage.solo { background: #000; }
-  .stage.solo .spot { flex: none; }
-  .stage.solo .pic { flex: none; display: block; }
-  .stage.solo .spot video { height: auto; max-height: 62vh; }
+  /* It gives way when the window is short, so the chat below keeps its last lines in view */
+  .stage.solo { flex: 0 1 auto; background: #000; }
+  .stage.solo .spot { flex: 0 1 auto; }
+  .stage.solo .pic { flex: 0 1 auto; flex-direction: column; }
+  .stage.solo .spot video { flex: 0 1 auto; height: auto; max-height: 62vh; }
   .stage.solo .away { flex: none; padding: 24px; }
   .wait { margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-dim); background: var(--bg-1); }
   .wait span { flex: 1; min-width: 0; }
diff --git a/test/e2e/share.e2e.ts b/test/e2e/share.e2e.ts
index d631b98..5075d78 100644
--- a/test/e2e/share.e2e.ts
+++ b/test/e2e/share.e2e.ts
@@ -104,6 +104,14 @@ try {
   await alice.page.setViewportSize({ width: 600, height: 800 });
   await alice.page.locator('.app.stacked .stage.solo video').waitFor();
   assert.ok(await fits(), 'still as wide as the chat on a narrow window');
+  // On a short window the picture gives way and the chat keeps about five lines
+  await alice.page.setViewportSize({ width: 600, height: 700 });
+  const heights = () => alice.page.evaluate(() => [document.querySelector('.chat [role=log]')!.getBoundingClientRect().height, document.querySelector('.stage.solo video')!.getBoundingClientRect().height]);
+  await alice.page.waitForFunction(() => document.querySelector('.stage.solo video')!.getBoundingClientRect().height < 250);
+  const [logH, videoH] = await heights();
+  assert.ok(logH >= 120, `chat keeps its lines: ${logH}`);
+  assert.ok(videoH > 40, `the picture is still shown: ${videoH}`);
+  await alice.page.setViewportSize({ width: 600, height: 800 });
   if (process.env.SHOTS_DIR) await alice.page.screenshot({ path: `${process.env.SHOTS_DIR}/stacked.png` });
   await alice.page.getByText('0 watching').waitFor();
   await alice.page.setViewportSize({ width: 1280, height: 800 });