Make the inline Event Log collapsible and viewport-bounded (v7)

Two scene-layout tweaks to the inline (third-column) Event Log:

- It can now be collapsed to a fixed corner button (✕ in its header) to declutter,
  and reopened from that button. ScenePhase owns `logOpen` and reflows the grid to
  two columns while collapsed; EventLog dispatches `collapse`.
- The panel now pins at top:3.5rem (matching .dashboard-container's top padding)
  with max-height calc(100vh - 4.5rem), so its bottom stays on-screen at any scroll
  position and .log-content scrolls internally — previously the bottom sat ~24px
  below the fold at the top of the page.

Verified across Pi-Rat and Deep views, scroll extremes, and 3-col / 1-col widths.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/assets/css/scene-play.css

@@ -17,6 +17,34 @@
     align-self: stretch;
 }
 
+/* When the inline log is collapsed, reclaim its column (3-col layout only). */
+@media (min-width: 1101px) {
+    .scene-view-layout.log-collapsed {
+        grid-template-columns: 180px minmax(0, 1fr);
+    }
+}
+
+/* Corner button that reopens the collapsed inline Event Log. */
+.log-reopen-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    padding: 10px 14px;
+    background: color-mix(in srgb, var(--bg-deep) 95%, transparent);
+    border: 1px solid var(--edge);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-deep);
+    color: var(--text);
+    font-weight: bold;
+    font-family: var(--font-heading);
+    cursor: pointer;
+    backdrop-filter: blur(10px);
+}
+.log-reopen-btn:hover {
+    background: color-mix(in srgb, var(--accent) 12%, var(--bg-deep));
+}
+
 @media (max-width: 1100px) {
     .scene-view-layout {
         grid-template-columns: 1fr;

frontend/src/components/EventLog.svelte

@@ -1,7 +1,9 @@
 <script>
-    import { tick, onMount } from 'svelte';
+    import { tick, onMount, createEventDispatcher } from 'svelte';
     import { apiRequest } from '../lib/api';
 
+    const dispatch = createEventDispatcher();
+
     export let state;
     // Inline mode pins the log open as a column (scene phase) instead of the
     // floating, collapsible corner panel used in every other phase.
@@ -194,7 +196,10 @@
         {/key}
     {/if}
     {#if inline}
-        <div class="log-header">📜 Event Log</div>
+        <div class="log-header">
+            📜 Event Log
+            <button class="log-hide-btn" title="Collapse the event log" on:click={() => dispatch('collapse')}>✕</button>
+        </div>
     {:else}
         <button class="toggle-log-btn" on:click={toggleOpen}>
             {open ? '⬇️ Hide Log' : '📜 Event Log'}
@@ -266,14 +271,18 @@
     .floating-event-log:not(.open) {
         width: auto;
     }
-    /* Inline mode: pinned as the scene's third column instead of floating. */
+    /* Inline mode: pinned as the scene's third column instead of floating. The
+       top offset matches .dashboard-container's top padding (clears the fixed
+       corner menu) so the panel doesn't shift as the page scrolls; the height
+       fills to ~1rem above the viewport bottom, so the panel never runs past
+       the screen and its .log-content scrolls internally instead. */
     .floating-event-log.inline {
         position: sticky;
-        top: 1rem;
+        top: 3.5rem;
         right: auto;
         bottom: auto;
         width: 100%;
-        max-height: calc(100vh - 2rem);
+        max-height: calc(100vh - 4.5rem);
     }
     @media (max-width: 1100px) {
         .floating-event-log.inline {
@@ -282,6 +291,7 @@
         }
     }
     .log-header {
+        position: relative;
         padding: 10px;
         text-align: center;
         font-weight: bold;
@@ -289,6 +299,24 @@
         border-bottom: 1px solid var(--edge-soft);
         color: var(--text);
     }
+    .log-hide-btn {
+        position: absolute;
+        top: 50%;
+        right: 6px;
+        transform: translateY(-50%);
+        background: transparent;
+        border: none;
+        color: var(--text-muted);
+        font-size: 1rem;
+        line-height: 1;
+        cursor: pointer;
+        padding: 2px 7px;
+        border-radius: var(--radius-sm);
+    }
+    .log-hide-btn:hover {
+        background: color-mix(in srgb, var(--text) 12%, transparent);
+        color: var(--text);
+    }
     .toggle-log-btn {
         background: transparent;
         color: var(--text);

frontend/src/components/ScenePhase.svelte

@@ -7,6 +7,9 @@
 
     export let state;
 
+    // The inline Event Log can be collapsed to a corner button to declutter.
+    let logOpen = true;
+
     $: hand = state.player.hand_cards ? JSON.parse(state.player.hand_cards) : [];
     $: playerTechs = { J: state.player.tech_jack, Q: state.player.tech_queen, K: state.player.tech_king };
     $: isDeep = state.player.role === 'deep';
@@ -16,7 +19,7 @@
     $: showChallengeArea = isDeep || openChallenges.length > 0;
 </script>
 
-<div class="scene-view-layout" id="scene-layout-container" data-game-id={state.game.id} data-player-id={state.player.id}>
+<div class="scene-view-layout" class:log-collapsed={!logOpen} id="scene-layout-container" data-game-id={state.game.id} data-player-id={state.player.id}>
     <!-- LEFT COLUMN: The Crew -->
     <CrewColumn {state} />
 
@@ -60,8 +63,16 @@
         </div>
     </div>
 
-    <!-- RIGHT COLUMN: The Event Log -->
-    <div class="log-column">
-        <EventLog {state} inline />
-    </div>
+    <!-- RIGHT COLUMN: The Event Log (collapsible to a corner button) -->
+    {#if logOpen}
+        <div class="log-column">
+            <EventLog {state} inline on:collapse={() => (logOpen = false)} />
+        </div>
+    {/if}
 </div>
+
+{#if !logOpen}
+    <button class="log-reopen-btn" title="Show the event log" on:click={() => (logOpen = true)}>
+        📜 Event Log
+    </button>
+{/if}

frontend/src/lib/changelog.js

@@ -6,10 +6,18 @@
 //   - Add a CHANGELOG entry only when a commit changes something players can
 //     see. Skip refactors, tests, and tooling. Keep wording player-facing.
 
-export const VERSION = 6;
+export const VERSION = 7;
 
 // Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
 export const CHANGELOG = [
+    {
+        version: 7,
+        date: '2026-06-15',
+        changes: [
+            'During a scene, the Event Log can be collapsed to a corner button to declutter your screen, and reopened from that button.',
+            'In the three-column layout, the Event Log now stays pinned within the screen and scrolls internally, so its newest entries are always visible.',
+        ],
+    },
     {
         version: 6,
         date: '2026-06-15',