From 2f594ebc2677b376995f6fd192a464e5e6531e26 Mon Sep 17 00:00:00 2001 From: Evan Date: Fri, 19 Jun 2026 19:36:06 -0700 Subject: [PATCH] Make the important events panel scrollable (#4346) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What Cap the height of the **Tier 1 (important) events panel** and make it scroll when many events stack up, instead of letting it grow unbounded up the screen. ## Why The less-important (Tier 2) events panel was already height-capped and scrollable, but the important panel had no limit — a burst of important events (chat, nukes inbound, alliance changes, etc.) could push the panel arbitrarily tall. ## Changes (`src/client/hud/layers/EventsDisplay.ts`) - Added `max-h-[30vh] lg:max-h-[40vh] overflow-y-auto` to the important-events container. - Mirrored the existing Tier 2 auto-scroll-to-bottom behavior for the important panel (new `.important-events-container` query + scroll tracking), so the newest important events stay in view rather than being hidden below the fold. If the player scrolls up, auto-scroll pauses (same as Tier 2). ## Testing Verified in the live game by injecting 15 important events: - Panel is height-capped and scrollable (`scrollHeight 540 > clientHeight 400`). - Auto-scrolls to the newest (`scrollTop` pinned to bottom); events 5–15 visible, older ones reachable by scrolling up. lint clean. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.8 --- src/client/hud/layers/EventsDisplay.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/client/hud/layers/EventsDisplay.ts b/src/client/hud/layers/EventsDisplay.ts index f9961e4b3..0322d8403 100644 --- a/src/client/hud/layers/EventsDisplay.ts +++ b/src/client/hud/layers/EventsDisplay.ts @@ -74,11 +74,19 @@ export class EventsDisplay extends LitElement implements Controller { private _eventsContainer?: HTMLDivElement; private _shouldScrollToBottom = true; + @query(".important-events-container") + private _importantEventsContainer?: HTMLDivElement; + private _shouldScrollImportantToBottom = true; + updated(changed: Map) { super.updated(changed); if (this._eventsContainer && this._shouldScrollToBottom) { this._eventsContainer.scrollTop = this._eventsContainer.scrollHeight; } + if (this._importantEventsContainer && this._shouldScrollImportantToBottom) { + this._importantEventsContainer.scrollTop = + this._importantEventsContainer.scrollHeight; + } } private renderButton(options: { @@ -172,6 +180,14 @@ export class EventsDisplay extends LitElement implements Controller { this._shouldScrollToBottom = true; } + if (this._importantEventsContainer) { + const el = this._importantEventsContainer; + this._shouldScrollImportantToBottom = + el.scrollHeight - el.scrollTop - el.clientHeight < 5; + } else { + this._shouldScrollImportantToBottom = true; + } + if (!this._isVisible && !this.game.inSpawnPhase()) { this._isVisible = true; this.requestUpdate(); @@ -640,7 +656,7 @@ export class EventsDisplay extends LitElement implements Controller { ${tier1Events.length > 0 || showBetrayalTimer ? html`