Skip to content

Commit a091bd7

Browse files
jeremymanningclaude
andcommitted
Fix colorbar positioning in landscape mobile mode
The colorbar was pushed off-screen in landscape because the mobile-closed branch ran for landscape viewports. Also fix the reposition timing: debounce by 350ms so the panel CSS transition completes before measuring position. Added initial reposition() call for panels already open at load time. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 538559f commit a091bd7

1 file changed

Lines changed: 15 additions & 4 deletions

File tree

src/viz/renderer.js

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -796,7 +796,7 @@ export class Renderer {
796796

797797
let lastPanelOpen = quizPanel.classList.contains('open');
798798

799-
const reposition = () => {
799+
const repositionNow = () => {
800800
if (!this._colorbarEl) return;
801801
const panelOpen = quizPanel.classList.contains('open');
802802
const isMobile = window.innerWidth <= 768;
@@ -829,8 +829,8 @@ export class Renderer {
829829
this._colorbarEl.style.right = 'auto';
830830
this._colorbarEl.style.top = 'auto';
831831
}
832-
} else if (isMobile) {
833-
// Panel closed on mobile — position above the drawer pull area
832+
} else if (isMobile && window.innerHeight > window.innerWidth) {
833+
// Panel closed on mobile portrait — position above the drawer pull area
834834
const panelRect = quizPanel.getBoundingClientRect();
835835
const containerRect = this._container.getBoundingClientRect();
836836
const newBottom = containerRect.height - (panelRect.top - containerRect.top) + 8;
@@ -839,14 +839,22 @@ export class Renderer {
839839
this._colorbarEl.style.left = 'auto';
840840
this._colorbarEl.style.top = 'auto';
841841
} else {
842-
// Panel closed on desktop — return to default
842+
// Panel closed on desktop or landscape — return to default
843843
this._colorbarEl.style.right = '16px';
844844
this._colorbarEl.style.bottom = '16px';
845845
this._colorbarEl.style.left = 'auto';
846846
this._colorbarEl.style.top = 'auto';
847847
}
848848
};
849849

850+
// Debounced reposition — waits for CSS transitions to settle
851+
let repositionTimer = null;
852+
const reposition = () => {
853+
repositionNow();
854+
clearTimeout(repositionTimer);
855+
repositionTimer = setTimeout(repositionNow, 350);
856+
};
857+
850858
// Observe class changes AND style changes (drag-resize) on quiz panel
851859
this._panelObserver = new MutationObserver(reposition);
852860
this._panelObserver.observe(quizPanel, { attributes: true, attributeFilter: ['class', 'style'] });
@@ -859,6 +867,9 @@ export class Renderer {
859867

860868
// Also reposition on resize (panel dimensions may change)
861869
window.addEventListener('resize', reposition);
870+
871+
// Initial reposition in case panel is already open on load
872+
reposition();
862873
}
863874

864875
_initColorbarDrag() {

0 commit comments

Comments
 (0)