iphone safe area fixes yess

webui/src/App.jsx

@@ -254,7 +254,7 @@ function App() {
   const fullscreen = useFullscreenPrompt(layout);
 
   return (
-    <div className={`${pageBackgroundClass} text-slate-100 ${isDesktop ? 'h-screen overflow-hidden' : 'min-h-screen'}`}>
+    <div className={`${pageBackgroundClass} text-slate-100 ${isDesktop ? 'h-screen overflow-hidden' : 'ios-safe-screen min-h-screen'}`}>
       <AppWithProviders layout={layout} isDesktop={isDesktop} fullscreen={fullscreen} />
     </div>
   );

webui/src/components/HornControl/index.jsx

@@ -25,7 +25,6 @@ export default function HornControl({
   showSettingsToggle = false,
   compactSettings = false,
 }) {
-  const [pressed, setPressed] = useState(false);
   const [showSettings, setShowSettings] = useState(defaultShowSettings);
   const { value: hornSettings, save: saveHornSettings } = useSettingsNamespace(
     'horn',
@@ -60,27 +59,6 @@ export default function HornControl({
       .join(' ');
   }, [className, isActive]);
 
-  const start = () => {
-    if (disabled) return;
-    if (!pressed) {
-      setPressed(true);
-      onStart?.();
-    }
-  };
-
-  const stop = () => {
-    if (pressed) {
-      setPressed(false);
-      onStop?.();
-    }
-  };
-
-  useEffect(() => {
-    if (!isActive && pressed) {
-      setPressed(false);
-    }
-  }, [isActive, pressed]);
-
   const formattedWaveform = waveform === 'sine' ? 'sine' : 'saw';
 
   const updateWaveform = useCallback(
@@ -142,7 +120,7 @@ export default function HornControl({
     event.preventDefault();
     activePointerIdRef.current = event.pointerId;
     event.currentTarget.setPointerCapture?.(event.pointerId);
-    start();
+    onStart?.();
   };
 
   const handlePointerUp = (event) => {
@@ -152,18 +130,19 @@ export default function HornControl({
     event.preventDefault();
     activePointerIdRef.current = null;
     event.currentTarget.releasePointerCapture?.(event.pointerId);
-    stop();
+    onStop?.();
   };
 
   const handlePointerCancel = (event) => {
     if (activePointerIdRef.current !== event.pointerId) return;
     activePointerIdRef.current = null;
-    stop();
+    onStop?.();
   };
 
   const handleBlur = () => {
+    if (activePointerIdRef.current === null) return;
     activePointerIdRef.current = null;
-    stop();
+    onStop?.();
   };
 
   const settingsToggle = showSettingsToggle ? (
@@ -185,14 +164,14 @@ export default function HornControl({
     <div
       role="button"
       tabIndex={0}
-      aria-pressed={pressed}
+      aria-pressed={isActive}
       onPointerDown={handlePointerDown}
       onPointerUp={handlePointerUp}
       onPointerCancel={handlePointerCancel}
       onLostPointerCapture={(event) => {
         if (activePointerIdRef.current === event.pointerId) {
           activePointerIdRef.current = null;
-          stop();
+          onStop?.();
         }
       }}
       onContextMenu={(event) => event.preventDefault()}

webui/src/controls/ControlContext.jsx

@@ -473,7 +473,12 @@ export function ControlSystemProvider({ children }) {
     (nightVisionOn) => {
       if (!pipeline.nightVision) return;
       if (typeof nightVisionOn === 'boolean') {
-        const action = nightVisionOn ? 'on' : 'off';
+        /*
+          Rover daemon command names describe the IR LED, while the UI state
+          describes camera visibility. LED "off" means nightVisionOn=true, and
+          LED "on" means nightVisionOn=false.
+        */
+        const action = nightVisionOn ? 'off' : 'on';
         pipeline.sendNightVision(action);
       } else {
         pipeline.sendNightVision('toggle');

webui/src/index.css

@@ -262,4 +262,16 @@ body {
     -webkit-text-size-adjust: 100%;
     touch-action: manipulation;
   }
+
+  .ios-safe-screen {
+    /*
+      viewport-fit=cover stops iOS from reserving automatic bars on both ends of
+      a homescreen app. We then add back only the unsafe notch edges so controls
+      do not sit under camera hardware, while the opposite edge stays flush.
+    */
+    padding-top: env(safe-area-inset-top);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: 0;
+  }
 }