Skip to content

Commit 685a0df

Browse files
committed
fix(configurator): track viewport changes for output drawer collapse
Add a MediaQueryList change listener so the output drawer responds to viewport resizes (e.g. phone rotation), not just the initial mount. Mirrors the existing preview-overlay pattern. https://claude.ai/code/session_01MAgtQ7JY16X2TqZZyGfkuu
1 parent 5de9a87 commit 685a0df

1 file changed

Lines changed: 6 additions & 1 deletion

File tree

configurator/src/App.svelte

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,13 @@
144144
145145
// On phone-sized viewports the output drawer starts collapsed so the main
146146
// area has enough room to be usable. The user can always tap the bar to expand.
147+
// Tracked live: rotating to portrait closes it; widening back re-opens it.
147148
$effect(() => {
148-
if (window.matchMedia('(max-width: 600px)').matches) ui.outputOpen = false;
149+
const mql = window.matchMedia('(max-width: 600px)');
150+
if (mql.matches) ui.outputOpen = false;
151+
const onChange = (e) => { ui.outputOpen = !e.matches; };
152+
mql.addEventListener('change', onChange);
153+
return () => mql.removeEventListener('change', onChange);
149154
});
150155
151156
// Keyboard shortcuts: '/' focuses the search box; 'b'/'a' switch mode;

0 commit comments

Comments
 (0)