/mini and chat improvements

webui/src/components/AlertFeed.jsx

@@ -11,7 +11,7 @@ function buildKey(alert) {
   return `${alert.title || 'alert'}-${alert.message}`;
 }
 
-export default function AlertFeed() {
+export default function AlertFeed({ scale = 1 }) {
   const { alerts } = useSession();
   const [now, setNow] = useState(() => Date.now());
   const latest = useMemo(() => alerts.slice(-3).map((alert) => ({ alert, key: buildKey(alert) })), [alerts]);
@@ -31,8 +31,20 @@ export default function AlertFeed() {
 
   if (!visible.length) return null;
 
+  const containerStyle =
+    scale === 1
+      ? undefined
+      : {
+          transform: `translateX(-50%) scale(${scale})`,
+          transformOrigin: 'top center',
+        };
+  const containerClass =
+    scale === 1
+      ? 'pointer-events-none fixed top-0.5 left-1/2 z-50 flex -translate-x-1/2 flex-col gap-0.5'
+      : 'pointer-events-none fixed top-0.5 left-1/2 z-50 flex flex-col gap-0.5';
+
   return (
-    <div className="pointer-events-none fixed top-0.5 left-1/2 z-50 flex -translate-x-1/2 flex-col gap-0.5">
+    <div className={containerClass} style={containerStyle}>
       {visible.map((toast) => (
         <AlertToast key={toast.key} alert={toast.alert} />
       ))}

webui/src/components/ChatMessageRow.jsx

@@ -88,7 +88,7 @@ export default function ChatMessageRow({ message }) {
         {displayName(message)}
       </span>
       {message.roverId && (
-        <span className="rounded bg-slate-800 px-1 text-[0.7rem]">rover {message.roverId}</span>
+        <span className="rounded bg-slate-800 px-1 text-[0.7rem]">{message.roverId}</span>
       )}
       <span className="text-slate-100 break-words leading-tight whitespace-pre-wrap">{message.text}</span>
       <span className="absolute bottom-0.5 right-1 text-[0.65rem] text-slate-400/60">

webui/src/components/VideoTile.jsx

@@ -52,6 +52,7 @@ export default function VideoTile({
   driverLabel = null,
   hudForceMap = false,
   hudMapPosition = 'top-right',
+  hudLabelScale = 1,
   fitParent = false,
   showTurnCue = false,
   turnTimerText = null,
@@ -416,6 +417,7 @@ export default function VideoTile({
           mobileHud={mobileHud}
           mapPosition={hudMapPosition}
           turnTimerText={turnTimerText}
+          labelScale={hudLabelScale}
         />
         <HudChatInput compact={mobileHud} />
         <OvercurrentOverlay motors={overcurrentMotors} compact={mobileHud} />
@@ -548,6 +550,7 @@ function HudOverlay({
   mobileHud = false,
   mapPosition = 'top-right',
   turnTimerText = null,
+  labelScale = 1,
 }) {
   const bumps = sensors?.bumpsAndWheelDrops || {};
   const [now, setNow] = useState(() => Date.now());
@@ -569,6 +572,10 @@ function HudOverlay({
   const timerPadClass = isMobile ? 'px-0.5 py-0.25' : 'px-1 py-0.5';
   const telemetryPosClass = isMobile ? 'left-0.5 top-1/2' : 'left-1 top-1/2';
   const labelPosClass = isMobile ? 'bottom-0.5' : 'bottom-0.5';
+  const labelWrapperStyle = {
+    transform: `translateX(-50%) scale(${labelScale})`,
+    transformOrigin: 'center bottom',
+  };
   const mapSize = '240px';
   const mapScale = portraitMobile ? 0.36 : isMobile ? 0.45 : 0.7;
   const mapOpacity = isMobile ? 0.85 : 0.7;
@@ -630,11 +637,13 @@ function HudOverlay({
           ) : null}
         </div>
 
-        <div
-          className={`absolute ${labelPosClass} left-1/2 flex -translate-x-1/2 items-center gap-1 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}
-        >
-          <span className="font-semibold text-white">{label || 'Unnamed Rover'}</span>
-          {driverLabel ? <span className="text-slate-300">• {driverLabel}</span> : null}
+        <div className={`absolute ${labelPosClass} left-1/2`} style={labelWrapperStyle}>
+          <div
+            className={`flex items-center gap-1 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}
+          >
+            <span className="font-semibold text-white">{label || 'Unnamed Rover'}</span>
+            {driverLabel ? <span className="text-slate-300">• {driverLabel}</span> : null}
+          </div>
         </div>
       </div>
     );
@@ -655,11 +664,11 @@ function HudOverlay({
           {turnTimerText}
         </div>
       ) : null}
-      <div
-        className={`absolute ${labelPosClass} left-1/2 flex -translate-x-1/2 gap-0.5 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}
-      >
-        <span>Rover: "{label || 'Unnamed Rover'}"</span>
-        {/* <span>{pulse ? 'Sensors active' : 'No recent sensors'}</span> */}
+      <div className={`absolute ${labelPosClass} left-1/2`} style={labelWrapperStyle}>
+        <div className={`flex gap-0.5 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}>
+          <span>Rover: "{label || 'Unnamed Rover'}"</span>
+          {/* <span>{pulse ? 'Sensors active' : 'No recent sensors'}</span> */}
+        </div>
       </div>
 
       {showTopDown && variant !== 'spectator' ? (