legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

finally fixed the scrolling issues!

Browse Source
This commit is contained in:
legop3
2025-11-24 04:11:34 -05:00
parent 4a3b91eeab
commit 0e14445685
8 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-BMB_cE6w.js → server/public/assets/index-C8Xb7rzW.js
+7 -7
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-q_XWdgDK.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-rQdoy40l.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+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-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-BMB_cE6w.js"></script> <script type="module" crossorigin src="/assets/index-C8Xb7rzW.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-q_XWdgDK.css"> <link rel="stylesheet" crossorigin href="/assets/index-rQdoy40l.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
webui/src/App.jsx
+7 -3
View File
@@ -58,9 +58,13 @@ function DesktopLayout({ layout }) {
<div className="flex h-full gap-0.5 overflow-hidden"> <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"> <div className="flex min-w-0 flex-[1.8] flex-col gap-0.5 overflow-y-auto pr-0.5">
<DriverVideoPanel /> <DriverVideoPanel />
<div className="grid grid-cols-2 gap-0.5"> <div className="grid h-52 grid-cols-2 gap-0.5">
<UserListPanel /> <div className="h-full min-h-0">
<ChatPanel /> <UserListPanel fillHeight />
</div>
<div className="h-full min-h-0">
<ChatPanel fillHeight />
</div>
</div> </div>
<LogPanel /> <LogPanel />
</div> </div>
webui/src/components/ChatPanel.jsx
+3 -3
View File
@@ -25,7 +25,7 @@ function displayName(message) {
return message.nickname || message.socketId?.slice(0, 6) || 'unknown'; return message.nickname || message.socketId?.slice(0, 6) || 'unknown';
} }
export default function ChatPanel({ hideInput = false, hideSpectatorNotice = false }) { export default function ChatPanel({ hideInput = false, hideSpectatorNotice = false, fillHeight = false }) {
const { session } = useSession(); const { session } = useSession();
const { messages, sendMessage, registerInputRef, onInputFocus, onInputBlur, blurChat } = useChat(); const { messages, sendMessage, registerInputRef, onInputFocus, onInputBlur, blurChat } = useChat();
const [draft, setDraft] = useState(''); const [draft, setDraft] = useState('');
@@ -57,10 +57,10 @@ export default function ChatPanel({ hideInput = false, hideSpectatorNotice = fal
} }
} }
const listClass = 'h-48'; const listClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : 'h-48 overflow-y-auto';
return ( return (
<section className="panel-section space-y-0.5 text-base"> <section className={`panel-section space-y-0.5 text-base ${fillHeight ? 'flex h-full flex-col overflow-hidden' : ''}`}>
<div className={`surface overflow-y-auto space-y-0.25 ${listClass}`} ref={listRef}> <div className={`surface overflow-y-auto space-y-0.25 ${listClass}`} ref={listRef}>
{sorted.length === 0 ? ( {sorted.length === 0 ? (
<p className="text-sm text-slate-500">No messages yet.</p> <p className="text-sm text-slate-500">No messages yet.</p>
webui/src/components/UserListPanel.jsx
+7 -5
View File
@@ -26,7 +26,7 @@ function formatLabel(user, selfId) {
return base; return base;
} }
export default function UserListPanel({ hideNicknameForm = false, hideHeader = false, className = '' }) { export default function UserListPanel({ hideNicknameForm = false, hideHeader = false, className = '', fillHeight = false }) {
const { session, setNickname } = useSession(); const { session, setNickname } = useSession();
const { value } = useSettingsNamespace('profile', { nickname: '' }); const { value } = useSettingsNamespace('profile', { nickname: '' });
const lastSyncedSocketRef = useRef(null); const lastSyncedSocketRef = useRef(null);
@@ -91,10 +91,12 @@ export default function UserListPanel({ hideNicknameForm = false, hideHeader = f
return Math.ceil(ms / 1000); return Math.ceil(ms / 1000);
}, []); }, []);
const listClass = 'h-48'; const listClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : 'h-48 overflow-y-auto';
return ( return (
<section className={`panel-section space-y-0.5 text-base ${className}`}> <section
className={`panel-section space-y-0.5 text-base ${fillHeight ? 'flex h-full min-h-0 flex-col overflow-hidden' : ''} ${className}`}
>
{!hideNicknameForm && ( {!hideNicknameForm && (
<div className="space-y-0.5"> <div className="space-y-0.5">
<NicknameForm /> <NicknameForm />
@@ -102,7 +104,7 @@ export default function UserListPanel({ hideNicknameForm = false, hideHeader = f
</div> </div>
)} )}
<div className="space-y-0.5"> <div className={`space-y-0.5 ${fillHeight ? 'flex flex-1 min-h-0 flex-col' : ''}`}>
{!hideHeader && ( {!hideHeader && (
<div className="flex items-center justify-between text-sm text-slate-400"> <div className="flex items-center justify-between text-sm text-slate-400">
<span>{isTurnsMode ? 'Turn queues' : 'Users'}</span> <span>{isTurnsMode ? 'Turn queues' : 'Users'}</span>
@@ -111,7 +113,7 @@ export default function UserListPanel({ hideNicknameForm = false, hideHeader = f
</span> </span>
</div> </div>
)} )}
<div className={`surface overflow-y-auto space-y-0.25 ${listClass}`}> <div className={`surface space-y-0.25 ${listClass}`}>
{isTurnsMode ? ( {isTurnsMode ? (
Object.keys(turnQueues || {}).length === 0 ? ( Object.keys(turnQueues || {}).length === 0 ? (
<p className="text-sm text-slate-500">No turn queues yet.</p> <p className="text-sm text-slate-500">No turn queues yet.</p>
webui/src/spectate/SpectatorApp.jsx
+2 -2
View File
@@ -111,13 +111,13 @@ function SecondaryRow() {
className="flex min-h-0 flex-col" className="flex min-h-0 flex-col"
style={roomHeight ? { height: roomHeight } : undefined} style={roomHeight ? { height: roomHeight } : undefined}
> >
<UserListPanel hideNicknameForm hideHeader fullHeight /> <UserListPanel hideNicknameForm hideHeader fillHeight />
</div> </div>
<div <div
className="flex min-h-0 flex-col" className="flex min-h-0 flex-col"
style={roomHeight ? { height: roomHeight } : undefined} style={roomHeight ? { height: roomHeight } : undefined}
> >
<ChatPanel hideInput hideSpectatorNotice fullHeight /> <ChatPanel hideInput hideSpectatorNotice fillHeight />
</div> </div>
</section> </section>
); );