From 389dc70e775fd12e905383082ea7e833ac572e88 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Mon, 23 Mar 2026 16:37:25 -0700 Subject: [PATCH] fix(settings): position dropdown below and to the right of gear icon The panel was right-aligned relative to the button which pushed it off-screen since the gear is on the left side of the header. Now left-aligns with the button and clamps to stay within viewport. Co-Authored-By: Claude Opus 4.6 --- shared/components/rstack-space-settings.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/shared/components/rstack-space-settings.ts b/shared/components/rstack-space-settings.ts index 2b3b86c..2d96456 100644 --- a/shared/components/rstack-space-settings.ts +++ b/shared/components/rstack-space-settings.ts @@ -115,15 +115,22 @@ export class RStackSpaceSettings extends HTMLElement { if (this._open) this.close(); else this.open(); } - /** Position the panel below the settings button, right-aligned. */ + /** Position the panel below the settings button, left-aligned with screen clamping. */ private _positionPanel() { const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement | null; const btn = document.getElementById("settings-btn"); if (!panel || !btn) return; const rect = btn.getBoundingClientRect(); + const panelWidth = Math.min(380, window.innerWidth * 0.9); + // Align panel's left edge with the button, but clamp so it stays on screen + let left = rect.left; + if (left + panelWidth > window.innerWidth - 8) { + left = window.innerWidth - panelWidth - 8; + } + if (left < 8) left = 8; panel.style.top = `${rect.bottom + 6}px`; - panel.style.right = `${window.innerWidth - rect.right}px`; - panel.style.left = "auto"; + panel.style.left = `${left}px`; + panel.style.right = "auto"; } private async _loadData() {