made mobile HUD smaller

webui/src/App.jsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import TelemetryPanel from './components/TelemetryPanel.jsx';
 import ControlSummary from './components/ControlSummary.jsx';
 import AlertFeed from './components/AlertFeed.jsx';
-import AdminPanel from './components/AdminPanel.jsx';
 import MobileControls, {
   MobileLandscapeAuxColumn,
   MobileLandscapeControlColumn,
@@ -11,11 +10,9 @@ import { ControlSystemProvider, KeyboardInputManager, GamepadInputManager } from
 import { SettingsProvider } from './settings/index.js';
 import RoomCameraPanel from './components/RoomCameraPanel.jsx';
 import LogPanel from './components/LogPanel.jsx';
-import AuthPanel from './components/AuthPanel.jsx';
 import DriverVideoPanel from './components/DriverVideoPanel.jsx';
 import RightPaneTabs from './components/RightPaneTabs.jsx';
 import ModeGateOverlay from './components/ModeGateOverlay.jsx';
-import SessionSnapshot from './components/SessionSnapshot.jsx';
 import HomeAssistantControls from './components/HomeAssistantControls.jsx';
 import TurnAlertListener from './components/TurnAlertListener.jsx';
 import UserListPanel from './components/UserListPanel.jsx';
@@ -24,6 +21,9 @@ import FullscreenPrompt from './components/FullscreenPrompt.jsx';
 import { useFullscreenPrompt } from './hooks/useFullscreenPrompt.js';
 import { useSettingsNamespace } from './settings/index.js';
 import HelpOverlay from './components/HelpOverlay.jsx';
+import HelpPanel from './components/HelpPanel.jsx';
+import SettingsPanel from './components/SettingsPanel.jsx';
+import Tabs, { Tab, TabList, TabPanel, TabPanels } from './components/Tabs.jsx';
 
 function useLayoutMode() {
   const [mode, setMode] = useState(() => {
@@ -78,25 +78,66 @@ function DesktopLayout({ layout, onOpenHelpOverlay }) {
   );
 }
 
-function MobilePortraitLayout() {
+function MobileFeatureTabs({
+  layout,
+  onOpenHelpOverlay,
+  roomPanelId,
+  showTelemetry = true,
+}) {
+  return (
+    <section className="panel text-base">
+      <Tabs defaultTab="chat">
+        <TabList>
+          <Tab id="chat">Chat</Tab>
+          <Tab id="roomcontrols">Room Controls</Tab>
+          <Tab id="help">Help</Tab>
+          <Tab id="settings">Settings</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel id="chat">
+            <div className="space-y-0.5">
+              <ChatPanel />
+              <UserListPanel />
+            </div>
+          </TabPanel>
+          <TabPanel id="roomcontrols">
+            <div className="space-y-0.5">
+              {showTelemetry ? <TelemetryPanel /> : null}
+              <HomeAssistantControls />
+              <RoomCameraPanel panelId={roomPanelId} />
+            </div>
+          </TabPanel>
+          <TabPanel id="help">
+            <HelpPanel layout={layout} onOpenOverlay={onOpenHelpOverlay} />
+          </TabPanel>
+          <TabPanel id="settings">
+            <div className="space-y-0.5">
+              <SettingsPanel />
+              <LogPanel />
+            </div>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </section>
+  );
+}
+
+function MobilePortraitLayout({ onOpenHelpOverlay }) {
   return (
     <div className="flex flex-col gap-0.5">
       <DriverVideoPanel layoutFormat='mobile'/>
       <MobileControls />
-      <ControlSummary />
-      <ChatPanel />
-      <UserListPanel />
-      <TelemetryPanel />
-      <AuthPanel />
-      <AdminPanel />
-      <HomeAssistantControls />
-      <RoomCameraPanel panelId="mobile-portrait-room" />
-      <LogPanel />
+      {/* <ControlSummary /> */}
+      <MobileFeatureTabs
+        layout="mobile-portrait"
+        onOpenHelpOverlay={onOpenHelpOverlay}
+        roomPanelId="mobile-portrait-room"
+      />
     </div>
   );
 }
 
-function MobileLandscapeLayout() {
+function MobileLandscapeLayout({ onOpenHelpOverlay }) {
   return (
     <div className="flex flex-col gap-0.5">
       <section className="grid min-h-screen grid-cols-[minmax(0,0.7fr)_minmax(0,2.1fr)_minmax(0,0.7fr)] gap-0.5">
@@ -108,20 +149,12 @@ function MobileLandscapeLayout() {
         <MobileLandscapeControlColumn />
       </section>
       <div className="flex flex-col gap-0.5 pb-0.5">
-        <section className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-0.5">
-          <div className="flex flex-col gap-0.5">
-            {/* <AuthPanel /> */}
-            {/* <AdminPanel /> */}
-            <UserListPanel />
-          </div>
-          <div className="flex flex-col gap-0.5">
-            {/* <LogPanel /> */}
-            <ChatPanel />
-          </div>
-        </section>
-        <HomeAssistantControls />
-        <RoomCameraPanel panelId="mobile-landscape-room" />
-        {/* <DrivePanel /> */}
+        <MobileFeatureTabs
+          layout="mobile-landscape"
+          onOpenHelpOverlay={onOpenHelpOverlay}
+          roomPanelId="mobile-landscape-room"
+          showTelemetry={false}
+        />
       </div>
     </div>
   );
@@ -180,8 +213,8 @@ function AppWithProviders({ layout, isDesktop, fullscreen }) {
       isDesktop
         ? <DesktopLayout layout={layout} onOpenHelpOverlay={openHelp} />
         : layout === 'mobile-landscape'
-        ? <MobileLandscapeLayout />
-        : <MobilePortraitLayout />,
+        ? <MobileLandscapeLayout onOpenHelpOverlay={openHelp} />
+        : <MobilePortraitLayout onOpenHelpOverlay={openHelp} />,
     [isDesktop, layout, openHelp],
   );