guh!

webui/src/App.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSession } from './context/SessionContext.jsx';
 import { useTelemetryFrame } from './context/TelemetryContext.jsx';
 import TelemetryPanel from './components/TelemetryPanel.jsx';
@@ -84,16 +84,16 @@ function DriverVideoPanel() {
   const sources = useVideoRequests(roverId ? [roverId] : []);
   const info = roverId ? sources[roverId] : null;
   const frame = useTelemetryFrame(roverId);
-  const batteryConfig = useMemo(() => {
-    if (!roverId || !session?.roster) return null;
-    const record = session.roster.find((item) => String(item.id) === String(roverId));
-    return record?.battery ?? null;
-  }, [session?.roster, roverId]);
+  const batteryRecord =
+    roverId && session?.roster
+      ? session.roster.find((item) => String(item.id) === String(roverId))
+      : null;
+  const batteryConfig = batteryRecord?.battery ?? null;
 
   return (
     <section className="rounded-sm bg-[#242a32] p-1">
       {roverId ? (
-        <div className="min-h-[70vh]">
+        <div className="lg:min-h-[70vh]">
           <VideoTile
             sessionInfo={info}
             label={roverId}

webui/src/components/MobileControls.jsx

@@ -118,9 +118,13 @@ function AuxMotorControls() {
 
 export default function MobileControlsStack() {
   return (
-    <div className="flex flex-col gap-1">
-      <MobileJoystick />
-      <AuxMotorControls />
+    <div className="flex flex-col gap-1 sm:flex-row">
+      <div className="flex-1">
+        <MobileJoystick />
+      </div>
+      <div className="flex-1">
+        <AuxMotorControls />
+      </div>
     </div>
   );
 }

webui/src/components/VideoTile.jsx

@@ -14,7 +14,6 @@ export default function VideoTile({ sessionInfo, label, forceMute = false, telem
   const [muted, setMuted] = useState(true);
   const sensors = telemetryFrame?.sensors;
   const batteryCharge = sensors?.batteryChargeMah ?? null;
-  const batteryCapacity = sensors?.batteryCapacityMah ?? null;
   // console.log('[BatteryBarDebug]', {
   //   frameSensors: sensors,
   //   batteryCharge,
@@ -143,12 +142,12 @@ export default function VideoTile({ sessionInfo, label, forceMute = false, telem
         <HudOverlay frame={telemetryFrame} />
         <OvercurrentOverlay active={overcurrentActive} />
       </div>
-      <BatteryBar charge={batteryCharge} capacity={batteryCapacity} config={batteryConfig} label={label} status={renderedStatus} />
+      <BatteryBar charge={batteryCharge} config={batteryConfig} label={label} status={renderedStatus} />
     </div>
   );
 }
 
-function BatteryBar({ charge, capacity, config, label, status }) {
+function BatteryBar({ charge, config, label, status }) {
   const full = config?.Full;
   const warn = config?.Warn;
   const urgent = config?.Urgent ?? null;
@@ -173,17 +172,12 @@ function BatteryBar({ charge, capacity, config, label, status }) {
   const depleted = normalized <= 0;
   const warnTriggered = urgent != null && charge <= urgent;
   const barClass = depleted ? 'bg-red-500 animate-pulse' : warnTriggered ? 'bg-amber-400' : 'bg-emerald-500';
-  const capText = capacity ? `${charge}/${capacity}` : `${charge}`;
   return (
     <div className="space-y-2 rounded-sm bg-[#1e1e1e] px-2 py-2 text-sm text-slate-200">
       <div className="flex items-center justify-between text-xs text-slate-400">
         <span>{label}</span>
         <span>{status}</span>
       </div>
-      {/* <div className="flex items-center justify-between text-sm">
-        <span>Battery</span>
-        <span>{capText} mAh</span>
-      </div> */}
       <div className="relative h-4 w-full rounded-full bg-slate-800">
         <div className={`h-full rounded-full transition-[width] ${barClass}`} style={{ width: `${percentDisplay}%` }} />
         <span className="absolute inset-0 flex items-center justify-center text-xs font-semibold text-black/80">