janky... but if it works?

This commit is contained in:
legop3
2025-11-24 03:56:53 -05:00
parent 448c2e0239
commit 76200dcd1f
6 changed files with 33 additions and 10 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -11,8 +11,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-CgsM9v_N.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-q_XWdgDK.css">
<script type="module" crossorigin src="/assets/index-Dq4z8Q8u.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-rQdoy40l.css">
</head>
<body>
<div id="root"></div>
+3 -3
View File
@@ -58,11 +58,11 @@ function DesktopLayout({ layout }) {
<div className="flex h-full gap-0.5 overflow-hidden">
<div className="flex min-w-0 flex-[1.8] flex-col gap-0.5 overflow-y-auto pr-0.5">
<DriverVideoPanel />
<div className="grid grid-cols-2 gap-0.5 h-50">
<div className="h-full">
<div className="grid grid-cols-2 gap-0.5 h-52 min-h-0">
<div className="h-full min-h-0">
<UserListPanel fullHeight />
</div>
<div className="h-full">
<div className="h-full min-h-0">
<ChatPanel fullHeight />
</div>
</div>
+26 -3
View File
@@ -1,3 +1,4 @@
import { useEffect, useRef, useState } from 'react';
import { SettingsProvider } from '../settings/index.js';
import { useSession } from '../context/SessionContext.jsx';
import { useSpectatorMode } from '../hooks/useSpectatorMode.js';
@@ -85,15 +86,37 @@ function RoverRow({ roster, frames, videoSources, session }) {
}
function SecondaryRow() {
const roomRef = useRef(null);
const [roomHeight, setRoomHeight] = useState(0);
useEffect(() => {
const target = roomRef.current;
if (!target || typeof ResizeObserver === 'undefined') return undefined;
const observer = new ResizeObserver((entries) => {
const entry = entries[0];
if (!entry) return;
const nextHeight = entry.contentRect?.height || 0;
setRoomHeight(nextHeight);
});
observer.observe(target);
return () => observer.disconnect();
}, []);
return (
<section className="grid grid-cols-1 items-stretch gap-0.5 lg:grid-cols-[2fr_1fr_1fr]">
<div className="flex h-full flex-col">
<div ref={roomRef} className="flex h-full min-h-0 flex-col">
<RoomCameraPanel defaultOrientation="horizontal" hideLayoutToggle hideHeader />
</div>
<div className="flex h-full min-h-0 flex-col">
<div
className="flex min-h-0 flex-col"
style={roomHeight ? { height: roomHeight } : undefined}
>
<UserListPanel hideNicknameForm hideHeader fullHeight />
</div>
<div className="flex h-full min-h-0 flex-col">
<div
className="flex min-h-0 flex-col"
style={roomHeight ? { height: roomHeight } : undefined}
>
<ChatPanel hideInput hideSpectatorNotice fullHeight />
</div>
</section>