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/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);