wuhm

webui/src/components/ChatPanel.jsx

@@ -25,7 +25,12 @@ function displayName(message) {
   return message.nickname || message.socketId?.slice(0, 6) || 'unknown';
 }
 
-export default function ChatPanel({ hideInput = false, hideSpectatorNotice = false, maxHeightClass = '' }) {
+export default function ChatPanel({
+  hideInput = false,
+  hideSpectatorNotice = false,
+  maxHeightClass = '',
+  heightClass = '',
+}) {
   const { session } = useSession();
   const { messages, sendMessage, registerInputRef, onInputFocus, onInputBlur, blurChat } = useChat();
   const [draft, setDraft] = useState('');
@@ -58,7 +63,9 @@ export default function ChatPanel({ hideInput = false, hideSpectatorNotice = fal
   }
 
   return (
-    <section className={`panel-section flex h-full flex-col space-y-0.5 overflow-hidden text-base ${maxHeightClass}`}>
+    <section
+      className={`panel-section flex flex-col space-y-0.5 overflow-hidden text-base ${heightClass} ${maxHeightClass}`}
+    >
       {/* <div className="flex items-center justify-between text-sm text-slate-400">
         <span>Chat</span>
         <span className="text-xs text-slate-500">{sorted.length}</span>

webui/src/components/UserListPanel.jsx

@@ -26,7 +26,12 @@ function formatLabel(user, selfId) {
   return base;
 }
 
-export default function UserListPanel({ hideNicknameForm = false, hideHeader = false, className = '' }) {
+export default function UserListPanel({
+  hideNicknameForm = false,
+  hideHeader = false,
+  className = '',
+  heightClass = '',
+}) {
   const { session, setNickname } = useSession();
   const { value } = useSettingsNamespace('profile', { nickname: '' });
   const lastSyncedSocketRef = useRef(null);
@@ -92,7 +97,9 @@ export default function UserListPanel({ hideNicknameForm = false, hideHeader = f
   }, []);
 
   return (
-    <section className={`panel-section flex h-full flex-col space-y-0.5 overflow-hidden text-base ${className}`}>
+    <section
+      className={`panel-section flex flex-col space-y-0.5 overflow-hidden text-base ${heightClass} ${className}`}
+    >
       {!hideNicknameForm && (
         <div className="space-y-0.5">
           <NicknameForm />

webui/src/spectate/SpectatorApp.jsx

@@ -89,10 +89,10 @@ function SecondaryRow() {
     <section className="grid grid-cols-1 gap-0.5 lg:grid-cols-[2fr_1fr_1fr]">
       <RoomCameraPanel defaultOrientation="horizontal" hideLayoutToggle hideHeader />
       <div className="flex flex-col">
-        <UserListPanel hideNicknameForm hideHeader className="h-full max-h-[50vh]" />
+        <UserListPanel hideNicknameForm hideHeader heightClass="h-[50vh]" />
       </div>
       <div className="flex flex-col">
-        <ChatPanel hideInput hideSpectatorNotice maxHeightClass="max-h-[50vh]" />
+        <ChatPanel hideInput hideSpectatorNotice heightClass="h-[50vh]" />
       </div>
     </section>
   );