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:
parent
3be63a7589
commit
4ce8ffc465
|
|
@ -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; }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue