1 files changed, 11 insertions, 0 deletions
diff --git a/public/bluebey-studio/src/main.js b/public/bluebey-studio/src/main.js
index a9d27f8..9c0b98d 100644
--- a/public/bluebey-studio/src/main.js
+++ b/public/bluebey-studio/src/main.js
@@ -2076,6 +2076,17 @@ async function init() {
     resizeViewport();
   }
 
+  // The panel is a side column on a wide screen and a bottom sheet on a small
+  // one, where it starts closed so the 3D view fills the screen (see the
+  // small-screen rules in src/style.css). When the window is resized across that
+  // breakpoint, match the layout the other side expects instead of leaving the
+  // panel stuck in the previous state.
+  const narrowScreenLayout = window.matchMedia('(max-width: 768px), (max-height: 500px) and (pointer: coarse)');
+  narrowScreenLayout.addEventListener('change', (event) => {
+    document.body.classList.toggle('panel-hidden', event.matches);
+    resizeViewport();
+  });
+
   function installKeys() {
     window.addEventListener('keydown', (event) => {
       // Undo/redo are the only shortcuts that need a modifier, so they are dealt