fix styles

public/app.js

@@ -1648,6 +1648,86 @@ els.btnMenu.onclick = () => els.sidebar.classList.contains('open') ? closeSideba
 els.sidebarBackdrop.onclick = closeSidebar;
 document.querySelectorAll('.channel.text').forEach((el) => el.addEventListener('click', closeSidebar));
 
+// ---------------------------------------------------------------------------
+// desktop panel resizing + sidebar collapse
+// ---------------------------------------------------------------------------
+const LS_SIDEBAR_W = 'voicepoc.sidebarWidth';
+const LS_SIDEBAR_COLLAPSED = 'voicepoc.sidebarCollapsed';
+const LS_SPATIAL_H = 'voicepoc.spatialHeight';
+const SIDEBAR_MIN = 180, SIDEBAR_MAX = 420;
+const SPATIAL_MIN = 140, SPATIAL_MAX_RATIO = 0.75;
+const isDesktop = () => window.matchMedia('(min-width: 861px)').matches;
+
+function dragResize({ handle, axis, onMove }) {
+  handle.addEventListener('mousedown', (e) => {
+    if (!isDesktop()) return;
+    e.preventDefault();
+    handle.classList.add('dragging');
+    const start = axis === 'x' ? e.clientX : e.clientY;
+    const onMouseMove = (ev) => onMove((axis === 'x' ? ev.clientX : ev.clientY) - start);
+    const onMouseUp = () => {
+      handle.classList.remove('dragging');
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  });
+}
+
+// sidebar width
+const sidebarResizer = $('#sidebar-resizer');
+const savedSidebarW = parseInt(localStorage.getItem(LS_SIDEBAR_W), 10);
+if (isDesktop() && savedSidebarW) els.sidebar.style.width = `${savedSidebarW}px`;
+let sidebarStartW = 0;
+dragResize({
+  handle: sidebarResizer, axis: 'x',
+  onMove: (dx) => {
+    if (!sidebarStartW) sidebarStartW = els.sidebar.getBoundingClientRect().width;
+    const w = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, sidebarStartW + dx));
+    els.sidebar.style.width = `${w}px`;
+    localStorage.setItem(LS_SIDEBAR_W, String(Math.round(w)));
+  },
+});
+sidebarResizer.addEventListener('mousedown', () => { sidebarStartW = 0; });
+
+// sidebar collapse/expand
+const btnSidebarCollapse = $('#btn-sidebar-collapse');
+const btnSidebarExpand = $('#btn-sidebar-expand');
+function setSidebarCollapsed(collapsed) {
+  document.body.classList.toggle('sidebar-collapsed', collapsed);
+  localStorage.setItem(LS_SIDEBAR_COLLAPSED, collapsed ? '1' : '0');
+}
+btnSidebarCollapse.onclick = () => setSidebarCollapsed(true);
+btnSidebarExpand.onclick = () => setSidebarCollapsed(false);
+if (isDesktop() && localStorage.getItem(LS_SIDEBAR_COLLAPSED) === '1') setSidebarCollapsed(true);
+
+// spatial pane height
+const spatialResizer = $('#spatial-resizer');
+const spatialWrap = $('#spatial-wrap');
+const savedSpatialH = parseInt(localStorage.getItem(LS_SPATIAL_H), 10);
+if (isDesktop() && savedSpatialH) spatialWrap.style.height = `${savedSpatialH}px`;
+let spatialStartH = 0;
+dragResize({
+  handle: spatialResizer, axis: 'y',
+  onMove: (dy) => {
+    if (!spatialStartH) spatialStartH = spatialWrap.getBoundingClientRect().height;
+    const max = window.innerHeight * SPATIAL_MAX_RATIO;
+    const h = Math.min(max, Math.max(SPATIAL_MIN, spatialStartH - dy));
+    spatialWrap.style.height = `${h}px`;
+    localStorage.setItem(LS_SPATIAL_H, String(Math.round(h)));
+    if (typeof cy !== 'undefined') cy.resize();
+  },
+});
+spatialResizer.addEventListener('mousedown', () => { spatialStartH = 0; });
+
+// dropping below the desktop breakpoint: let mobile's own CSS take over sizing
+window.addEventListener('resize', () => {
+  if (isDesktop()) return;
+  els.sidebar.style.width = '';
+  spatialWrap.style.height = '';
+});
+
 // Initial roster fetch and lightweight periodic sync (especially for unjoined clients)
 updateMicButton();
 updateDeafenButton();