`feat(vector-map-editor): unify fullscreen sidebars with accordion UX and no-page-scroll layout

- enforce fullscreen fit-to-viewport behavior with no page scrollbar
- keep scrolling scoped to overlay side panels only in fullscreen
- add/keep overlay close controls with updated X styling/position
- convert right properties sidebar sections to accordions
  - default open: Selected Object
  - default closed: Center Point, Rotation, Appearance, Collision Flags, Points
- move Keyboard & Mouse section to left sidebar
- convert left sidebar sections to accordions
  - default open: Objects
  - default closed: Document, Collision Result, Keyboard & Mouse
- preserve existing control IDs and tool behavior while improving fullscreen readability and panel navigation`

Author: DavidQ

tools/Parallax Scene Studio/index.html

@@ -74,7 +74,7 @@
     </header>
 
     <div class="workspace tools-platform-layout-grid">
-      <aside class="sidebar left-sidebar tools-platform-resize-panel" data-panel-side="left">
+      <aside class="sidebar left-sidebar tools-platform-resize-panel" data-panel-side="left" id="leftSidebar">
         <section class="panel">
           <h3>Parallax Layers</h3>
           <ul id="layerList" class="layer-list"></ul>
@@ -117,11 +117,13 @@ <h3>Preview Camera</h3>
         </div>
         <div class="preview-wrap">
           <canvas id="previewCanvas" width="960" height="540"></canvas>
+          <button id="showLeftPanelButton" class="fullscreen-overlay-button" type="button">Layers</button>
+          <button id="showRightPanelButton" class="fullscreen-overlay-button" type="button">Properties</button>
         </div>
         <div id="statusText" class="status-text">Ready.</div>
       </main>
 
-      <aside class="sidebar right-sidebar tools-platform-resize-panel" data-panel-side="right">
+      <aside class="sidebar right-sidebar tools-platform-resize-panel" data-panel-side="right" id="rightSidebar">
         <section class="panel">
           <h3>Selected Layer</h3>
           <label>

tools/Parallax Scene Studio/main.js

@@ -378,6 +378,7 @@ class ParallaxEditorApp {
   init(rootDocument) {
     this.captureRefs(rootDocument);
     this.attachEvents();
+    this.syncFullscreenState();
     this.syncInputsFromDocument();
     this.renderAll();
     this.bindRuntimeStateSync();
@@ -452,6 +453,11 @@ class ParallaxEditorApp {
     this.refs.previewMeta = rootDocument.getElementById("previewMeta");
     this.refs.simulationContext = rootDocument.getElementById("simulationContext");
     this.refs.statusText = rootDocument.getElementById("statusText");
+    this.refs.appShell = rootDocument.querySelector(".app-shell");
+    this.refs.leftSidebar = rootDocument.getElementById("leftSidebar");
+    this.refs.rightSidebar = rootDocument.getElementById("rightSidebar");
+    this.refs.showLeftPanelButton = rootDocument.getElementById("showLeftPanelButton");
+    this.refs.showRightPanelButton = rootDocument.getElementById("showRightPanelButton");
     this.refs.previewWrap = rootDocument.querySelector(".preview-wrap");
     this.refs.previewCanvas = rootDocument.getElementById("previewCanvas");
     this.refs.previewContext = this.refs.previewCanvas.getContext("2d", { alpha: false });
@@ -477,6 +483,17 @@ class ParallaxEditorApp {
     this.refs.inspectRemediationButton.addEventListener("click", () => this.inspectRemediationActions());
     this.refs.jumpToProblemButton.addEventListener("click", () => this.jumpToRemediationProblem());
     this.refs.applyRemediationButton.addEventListener("click", () => this.applyRemediationAction());
+    this.refs.showLeftPanelButton?.addEventListener("click", () => {
+      this.refs.leftSidebar?.classList.toggle("visible-overlay");
+    });
+    this.refs.showRightPanelButton?.addEventListener("click", () => {
+      this.refs.rightSidebar?.classList.toggle("visible-overlay");
+    });
+    document.addEventListener("fullscreenchange", () => {
+      this.syncFullscreenState();
+      this.refs.leftSidebar?.classList.remove("visible-overlay");
+      this.refs.rightSidebar?.classList.remove("visible-overlay");
+    });
 
     this.refs.applyMapMetaButton.addEventListener("click", () => this.applyMapMetaFromInputs());
     this.refs.projectNameInput.addEventListener("change", () => this.applyMapMetaFromInputs());
@@ -513,6 +530,10 @@ class ParallaxEditorApp {
     }
   }
 
+  syncFullscreenState() {
+    document.body.classList.toggle("fullscreen-mode", Boolean(document.fullscreenElement));
+  }
+
   getSelectedLayer() {
     return this.documentModel.layers.find((layer) => layer.id === this.selectedLayerId) || this.documentModel.layers[0] || null;
   }

tools/Parallax Scene Studio/parallaxEditor.css

@@ -143,6 +143,7 @@ button:hover,
 }
 
 .preview-wrap {
+  position: relative;
   flex: 1;
   min-height: 260px;
   border: 1px solid var(--parallax-border);
@@ -224,6 +225,93 @@ button:hover,
   font-size: 12px;
 }
 
+.parallax-editor-page .fullscreen-overlay-button {
+  position: absolute;
+  top: 10px;
+  z-index: 20;
+  display: none;
+  min-height: 32px;
+  padding: 0 10px;
+}
+
+.parallax-editor-page #showLeftPanelButton {
+  left: 10px;
+}
+
+.parallax-editor-page #showRightPanelButton {
+  right: 10px;
+}
+
+body.parallax-editor-page.fullscreen-mode .app-shell {
+  min-height: 100vh;
+  min-height: 100dvh;
+  overflow: hidden;
+  padding: 8px;
+  gap: 8px;
+}
+
+body.parallax-editor-page.fullscreen-mode .toolbar {
+  padding: 8px;
+  gap: 8px;
+}
+
+body.parallax-editor-page.fullscreen-mode .toolbar-group.tools-platform-control-cluster--workflow,
+body.parallax-editor-page.fullscreen-mode .toolbar-group.tools-platform-control-cluster--preview {
+  display: none;
+}
+
+body.parallax-editor-page.fullscreen-mode .workspace {
+  grid-template-columns: minmax(0, 1fr);
+  height: calc(100dvh - 90px);
+  gap: 8px;
+}
+
+body.parallax-editor-page.fullscreen-mode .sidebar {
+  display: none;
+}
+
+body.parallax-editor-page.fullscreen-mode .sidebar.visible-overlay {
+  display: block;
+  position: fixed;
+  top: 70px;
+  bottom: 8px;
+  width: min(360px, calc(100vw - 24px));
+  z-index: 50;
+  overflow: auto;
+}
+
+body.parallax-editor-page.fullscreen-mode .left-sidebar.visible-overlay {
+  left: 12px;
+}
+
+body.parallax-editor-page.fullscreen-mode .right-sidebar.visible-overlay {
+  right: 12px;
+}
+
+body.parallax-editor-page.fullscreen-mode .preview-panel {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 8px;
+}
+
+body.parallax-editor-page.fullscreen-mode .preview-wrap {
+  overflow: hidden;
+  min-height: 0;
+  height: 100%;
+}
+
+body.parallax-editor-page.fullscreen-mode #previewCanvas {
+  width: 100%;
+  height: 100%;
+}
+
+body.parallax-editor-page.fullscreen-mode .fullscreen-overlay-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @media (max-width: 1260px) {
   .workspace {
     grid-template-columns: 1fr;

tools/Vector Map Editor/editor/VectorMapEditorApp.js

@@ -84,8 +84,12 @@ export class VectorMapEditorApp {
   cacheElements(doc) {
     return {
       appRoot: doc.getElementById("appRoot"),
+      headerAccordion: doc.querySelector(".is-collapsible"),
+      toolsPlatformStatusHost: doc.querySelector("[data-tools-platform-status]"),
       leftSidebar: doc.getElementById("leftSidebar"),
       rightSidebar: doc.getElementById("rightSidebar"),
+      closeLeftOverlayButton: doc.getElementById("closeLeftOverlayButton"),
+      closeRightOverlayButton: doc.getElementById("closeRightOverlayButton"),
       showLeftPanelButton: doc.getElementById("showLeftPanelButton"),
       showRightPanelButton: doc.getElementById("showRightPanelButton"),
       canvasShell: doc.getElementById("canvasShell"),
@@ -111,7 +115,6 @@ export class VectorMapEditorApp {
       saveDocumentButton: doc.getElementById("saveDocumentButton"),
       exportRuntimeButton: doc.getElementById("exportRuntimeButton"),
       loadDocumentInput: doc.getElementById("loadDocumentInput"),
-      toggleFullscreenButton: doc.getElementById("toggleFullscreenButton"),
       toggleJsonDockButton: doc.getElementById("toggleJsonDockButton"),
       duplicateObjectButton: doc.getElementById("duplicateObjectButton"),
       deleteObjectButton: doc.getElementById("deleteObjectButton"),
@@ -172,11 +175,15 @@ export class VectorMapEditorApp {
   start() {
     this.ctx = this.elements.canvas.getContext("2d");
     this.historyManager.reset();
+    this.syncFullscreenLayoutHeight();
     this.resizeCanvas();
     this.wireEvents();
     this.syncUIFromDocument();
     this.render();
-    window.addEventListener("resize", () => this.resizeCanvas());
+    window.addEventListener("resize", () => {
+      this.syncFullscreenLayoutHeight();
+      this.resizeCanvas();
+    });
     this.setStatus("Vector Map Editor ready.");
     void this.loadSampleManifest({ quiet: true });
   }
@@ -374,6 +381,7 @@ export class VectorMapEditorApp {
 
     document.addEventListener("fullscreenchange", () => {
       this.fullscreenController.syncBodyClass();
+      this.syncFullscreenLayoutHeight();
       this.elements.leftSidebar.classList.remove("visible-overlay");
       this.elements.rightSidebar.classList.remove("visible-overlay");
       this.resizeCanvas();
@@ -458,12 +466,6 @@ export class VectorMapEditorApp {
       this.setStatus(`Loaded ${file.name}.`);
     });
 
-    this.elements.toggleFullscreenButton.addEventListener("click", async () => {
-      await this.fullscreenController.toggle();
-      this.resizeCanvas();
-      this.render();
-    });
-
     this.elements.showLeftPanelButton.addEventListener("click", () => {
       this.elements.leftSidebar.classList.toggle("visible-overlay");
     });
@@ -472,6 +474,14 @@ export class VectorMapEditorApp {
       this.elements.rightSidebar.classList.toggle("visible-overlay");
     });
 
+    this.elements.closeLeftOverlayButton?.addEventListener("click", () => {
+      this.elements.leftSidebar.classList.remove("visible-overlay");
+    });
+
+    this.elements.closeRightOverlayButton?.addEventListener("click", () => {
+      this.elements.rightSidebar.classList.remove("visible-overlay");
+    });
+
     this.elements.toggleJsonDockButton.addEventListener("click", () => {
       this.elements.jsonDock.classList.toggle("hidden");
       this.resizeCanvas();
@@ -703,6 +713,35 @@ export class VectorMapEditorApp {
     });
   }
 
+  syncFullscreenLayoutHeight() {
+    const appRoot = this.elements.appRoot;
+    if (!(appRoot instanceof HTMLElement)) {
+      return;
+    }
+
+    if (!document.fullscreenElement) {
+      appRoot.style.height = "";
+      appRoot.style.maxHeight = "";
+      document.body.style.overflow = "";
+      document.documentElement.style.overflow = "";
+      return;
+    }
+
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+    const headerHeight = this.elements.headerAccordion instanceof HTMLElement
+      ? this.elements.headerAccordion.getBoundingClientRect().height
+      : 0;
+    const statusHeight = this.elements.toolsPlatformStatusHost instanceof HTMLElement
+      ? this.elements.toolsPlatformStatusHost.getBoundingClientRect().height
+      : 0;
+    const availableHeight = Math.max(320, Math.floor(viewportHeight - headerHeight - statusHeight - 4));
+
+    appRoot.style.height = `${availableHeight}px`;
+    appRoot.style.maxHeight = `${availableHeight}px`;
+    document.body.style.overflow = "hidden";
+    document.documentElement.style.overflow = "hidden";
+  }
+
   wireSpinButton(button, axis, direction) {
     button.addEventListener("click", (event) => {
       const step = event.shiftKey ? 15 : 1;