fix: video fills available space + correct WASM path resolution

- Remove fixed aspect-ratio and max-height from video panel so it
  fills the available viewport space without scrolling
- Grid uses 1fr row for content area, overflow:hidden on main grid
- Fix WASM path: resolve relative to JS module file using import.meta.url
  instead of hardcoded ./pkg/ which resolved incorrectly on gh-pages
- Responsive: mobile still gets aspect-ratio constraint

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
ruv 2026-03-12 16:16:07 -04:00
parent 3be63a7589
commit 4ce8ffc465
2 changed files with 13 additions and 9 deletions

View File

@ -129,10 +129,11 @@ body {
.main-grid { .main-grid {
display: grid; display: grid;
grid-template-columns: 1fr 360px; grid-template-columns: 1fr 360px;
grid-template-rows: auto auto; grid-template-rows: 1fr auto;
gap: 16px; gap: 16px;
padding: 16px 24px; padding: 16px 24px;
max-height: calc(100vh - 72px); height: calc(100vh - 72px);
overflow: hidden;
} }
/* === Video Panel === */ /* === Video Panel === */
@ -142,8 +143,7 @@ body {
border-radius: var(--radius); border-radius: var(--radius);
border: 1px solid var(--bg-panel-border); border: 1px solid var(--bg-panel-border);
overflow: hidden; overflow: hidden;
aspect-ratio: 4/3; min-height: 0;
max-height: 60vh;
} }
.video-panel video { .video-panel video {
@ -204,7 +204,7 @@ body {
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - 88px); min-height: 0;
} }
.panel { .panel {
@ -397,7 +397,9 @@ body {
@media (max-width: 900px) { @media (max-width: 900px) {
.main-grid { .main-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
height: auto;
overflow: auto;
} }
.video-panel { aspect-ratio: 16/9; max-height: 40vh; } .video-panel { aspect-ratio: 16/9; max-height: 50vh; }
.side-panels { max-height: none; } .side-panels { max-height: none; overflow: visible; }
} }

View File

@ -111,8 +111,10 @@ function init() {
}); });
// Try to load WASM embedders (non-blocking) // Try to load WASM embedders (non-blocking)
visualCnn.tryLoadWasm('./pkg/ruvector_cnn_wasm'); // Resolve relative to this JS module file (in pose-fusion/js/) → ../pkg/
csiCnn.tryLoadWasm('./pkg/ruvector_cnn_wasm'); const wasmBase = new URL('../pkg/ruvector_cnn_wasm', import.meta.url).href;
visualCnn.tryLoadWasm(wasmBase);
csiCnn.tryLoadWasm(wasmBase);
// Auto-start camera for video/dual modes // Auto-start camera for video/dual modes
updateModeUI(); updateModeUI();