UI Fixes (#11423)

* Settings fixes

* Fix formatting

web/src/components/Statusbar.tsx

@@ -116,7 +116,7 @@ export default function Statusbar() {
           );
         })}
       </div>
-      <div className="flex h-full items-center gap-2 max-w-[50%] overflow-x-auto no-scrollbar">
+      <div className="no-scrollbar flex h-full max-w-[50%] items-center gap-2 overflow-x-auto">
         {Object.entries(messages).length === 0 ? (
           <div className="flex items-center gap-2 text-sm">
             <FaCheck className="size-3 text-green-500" />
@@ -129,7 +129,7 @@ export default function Statusbar() {
                 const message = (
                   <div
                     key={text}
-                    className={`flex items-center gap-2 text-sm whitespace-nowrap ${link ? "cursor-pointer hover:underline" : ""}`}
+                    className={`flex items-center gap-2 whitespace-nowrap text-sm ${link ? "cursor-pointer hover:underline" : ""}`}
                   >
                     <IoIosWarning
                       className={`size-5 ${color || "text-danger"}`}

web/src/components/menu/AccountSettings.tsx

@@ -34,10 +34,8 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
   const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
 
   return (
-    <div className={className}>
     <Container>
       <Trigger asChild>
-          <a href="#">
         <Tooltip>
           <TooltipTrigger asChild>
             <div
@@ -58,7 +56,6 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
             </TooltipContent>
           </TooltipPortal>
         </Tooltip>
-          </a>
       </Trigger>
       <Content
         className={
@@ -83,6 +80,5 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
         </div>
       </Content>
     </Container>
-    </div>
   );
 }

web/src/components/menu/GeneralSettings.tsx

@@ -116,7 +116,6 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
       <div className={className}>
         <Container>
           <Trigger asChild>
-            <a href="#">
             <Tooltip>
               <TooltipTrigger asChild>
                 <div
@@ -131,7 +130,6 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                 </TooltipContent>
               </TooltipPortal>
             </Tooltip>
-            </a>
           </Trigger>
           <Content
             className={

web/src/components/navigation/Bottombar.tsx

@@ -15,7 +15,7 @@ import {
 } from "@/context/statusbar-provider";
 import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
-import { isMobile } from "react-device-detect";
+import { isIOS, isMobile } from "react-device-detect";
 import { isPWA } from "@/utils/isPWA";
 
 function Bottombar() {
@@ -25,7 +25,7 @@ function Bottombar() {
     <div
       className={cn(
         "absolute inset-x-4 bottom-0 flex h-16 flex-row justify-between",
-        isPWA
+        isPWA && isIOS
           ? "portrait:items-start portrait:pt-1 landscape:items-center"
           : "items-center",
         isMobile && !isPWA && "h-12 landscape:md:h-16",

web/src/components/player/PreviewPlayer.tsx

@@ -82,10 +82,10 @@ export default function PreviewPlayer({
   }
 
   return (
-    <div className="size-full flex items-center justify-center rounded-lg text-white md:rounded-2xl">
+    <div className="flex size-full items-center justify-center rounded-lg text-white md:rounded-2xl">
       No Preview Found
     </div>
-  )
+  );
 }
 
 export abstract class PreviewController {

web/src/hooks/use-stats.ts

@@ -51,7 +51,7 @@ export default function useStats(stats: FrigateStats | undefined) {
         return;
       }
 
-      if (config.cameras[name].enabled && (cam["camera_fps"] == 0)) {
+      if (config.cameras[name].enabled && cam["camera_fps"] == 0) {
         problems.push({
           text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} is offline`,
           color: "text-danger",

web/src/views/live/LiveCameraView.tsx

@@ -101,7 +101,9 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
     return (
       cameraMetadata.producers.find(
         (prod) =>
-          prod.medias && prod.medias.find((media) => media.includes("audio, sendonly")) != undefined,
+          prod.medias &&
+          prod.medias.find((media) => media.includes("audio, sendonly")) !=
+            undefined,
       ) != undefined
     );
   }, [cameraMetadata]);
@@ -113,10 +115,12 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
     return (
       cameraMetadata.producers.find(
         (prod) =>
-          prod.medias && prod.medias.find((media) => media.includes("audio, recvonly")) != undefined,
+          prod.medias &&
+          prod.medias.find((media) => media.includes("audio, recvonly")) !=
+            undefined,
       ) != undefined
     );
-  }, [cameraMetadata])
+  }, [cameraMetadata]);
 
   // click overlay for ptzs
 
@@ -351,14 +355,16 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
                   onClick={() => setMic(!mic)}
                 />
               )}
-              {supportsAudioOutput && <CameraFeatureToggle
+              {supportsAudioOutput && (
+                <CameraFeatureToggle
                   className="p-2 md:p-0"
                   variant={fullscreen ? "overlay" : "primary"}
                   Icon={audio ? GiSpeaker : GiSpeakerOff}
                   isActive={audio}
                   title={`${audio ? "Disable" : "Enable"} Camera Audio`}
                   onClick={() => setAudio(!audio)}
-              />}
+                />
+              )}
               <FrigateCameraFeatures
                 camera={camera.name}
                 audioDetectEnabled={camera.audio.enabled_in_config}