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

fix(shell): position settings/history panels below their buttons 

Both panels now use position:fixed with JS-computed coordinates from
getBoundingClientRect(), ensuring they open directly below their
respective header buttons and right-aligned to the button edge.
History panel clamps left edge to prevent off-screen overflow.

Also adds missing click handlers for settings-btn and history-btn
in canvas.html (previously only wired in shell.ts module pages).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-22 13:59:44 -07:00
parent 7d4e6122f1
commit fe7157ffe1
3 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
shared/components/rstack-history-panel.ts
View File

@ -71,6 +71,7 @@ export class RStackHistoryPanel extends HTMLElement {
this._open = true;
this._refreshHistory();
this._render();
this._positionPanel();
document.getElementById("history-btn")?.classList.add("active");
document.addEventListener("click", this._clickOutsideHandler, true);
}
@ -87,6 +88,27 @@ export class RStackHistoryPanel extends HTMLElement {
if (this._open) this.close(); else this.open();
}
/** Position the panel below the history button, right-aligned to button. */
private _positionPanel() {
const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement | null;
const btn = document.getElementById("history-btn");
if (!panel || !btn) return;
const rect = btn.getBoundingClientRect();
panel.style.top = `${rect.bottom + 6}px`;
// Right-align to button's right edge, but clamp so left edge stays on screen
const rightOffset = window.innerWidth - rect.right;
panel.style.right = `${rightOffset}px`;
panel.style.left = "auto";
// After layout, check if panel overflows left edge
requestAnimationFrame(() => {
const panelRect = panel.getBoundingClientRect();
if (panelRect.left < 8) {
panel.style.right = "auto";
panel.style.left = "8px";
}
});
}
setDoc(doc: Automerge.Doc<any>) {
this._doc = doc;
if (this._open) {
@ -417,9 +439,7 @@ const PANEL_CSS = `
}
.panel {
position: absolute;
top: 100%;
right: 0;
position: fixed;
width: min(420px, 92vw);
max-height: calc(100vh - 72px);
background: var(--rs-bg-surface, #1e293b);
@ -432,7 +452,6 @@ const PANEL_CSS = `
animation: dropDown 0.2s ease;
color: var(--rs-text-primary, #e2e8f0);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin-top: 6px;
}
@keyframes dropDown {

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

@ -100,6 +100,7 @@ export class RStackSpaceSettings extends HTMLElement {
this._loadData();
this._loadModuleConfig();
this._render();
this._positionPanel();
document.addEventListener("click", this._clickOutsideHandler, true);
}
@ -113,6 +114,17 @@ export class RStackSpaceSettings extends HTMLElement {
if (this._open) this.close(); else this.open();
}
/** Position the panel below the settings button, right-aligned. */
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();
panel.style.top = `${rect.bottom + 6}px`;
panel.style.right = `${window.innerWidth - rect.right}px`;
panel.style.left = "auto";
}
private async _loadData() {
if (!this._space) return;
@ -668,9 +680,7 @@ const PANEL_CSS = `
}
.panel {
position: absolute;
top: 100%;
right: 0;
position: fixed;
width: min(380px, 90vw);
max-height: calc(100vh - 72px);
background: var(--rs-bg-surface);
@ -683,7 +693,6 @@ const PANEL_CSS = `
animation: dropDown 0.2s ease;
color: var(--rs-text-primary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin-top: 6px;
}
@keyframes dropDown {

10
website/canvas.html
View File

@ -2532,6 +2532,16 @@
RStackSpaceSettings.define();
RStackHistoryPanel.define();
// ── Settings & history panel toggle (same as shell.ts) ──
document.getElementById("settings-btn")?.addEventListener("click", () => {
document.querySelector("rstack-history-panel")?.close();
document.querySelector("rstack-space-settings")?.toggle();
});
document.getElementById("history-btn")?.addEventListener("click", () => {
document.querySelector("rstack-space-settings")?.close();
document.querySelector("rstack-history-panel")?.toggle();
});
// Reload space list when user signs in/out
document.addEventListener("auth-change", () => {
const sw = document.querySelector("rstack-space-switcher");