jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-23 16:37:25 -07:00
parent 6cb82f3098
commit 389dc70e77
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
shared/components/rstack-space-settings.ts
View File

@ -115,15 +115,22 @@ export class RStackSpaceSettings extends HTMLElement {
if (this._open) this.close(); else this.open(); 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() { private _positionPanel() {
const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement | null; const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement | null;
const btn = document.getElementById("settings-btn"); const btn = document.getElementById("settings-btn");
if (!panel || !btn) return; if (!panel || !btn) return;
const rect = btn.getBoundingClientRect(); 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.top = `${rect.bottom + 6}px`;
panel.style.right = `${window.innerWidth - rect.right}px`; panel.style.left = `${left}px`;
panel.style.left = "auto"; panel.style.right = "auto";
} }
private async _loadData() { private async _loadData() {