fix frigate+ dialog when using mobile page component

web/src/components/overlay/dialog/FrigatePlusDialog.tsx

@@ -13,6 +13,7 @@ import { Event } from "@/types/event";
 import { FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
 import { useCallback, useMemo, useState } from "react";
+import { isDesktop } from "react-device-detect";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
 
@@ -34,6 +35,9 @@ export function FrigatePlusDialog({
 
   // layout
 
+  const Title = isDesktop ? DialogTitle : "div";
+  const Description = isDesktop ? DialogDescription : "div";
+
   const grow = useMemo(() => {
     if (!config || !upload) {
       return "";
@@ -79,12 +83,25 @@ export function FrigatePlusDialog({
 
   const content = (
     <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
-      <DialogHeader className={state == "submitted" ? "sr-only" : ""}>
-        <DialogTitle>Submit To Frigate+</DialogTitle>
-        <DialogDescription>
+      <div className="flex flex-col space-y-3">
+        <DialogHeader
+          className={state == "submitted" ? "sr-only" : "text-left"}
+        >
+          <Title
+            className={
+              !isDesktop
+                ? "text-lg font-semibold leading-none tracking-tight"
+                : undefined
+            }
+          >
+            Submit To Frigate+
+          </Title>
+          <Description
+            className={!isDesktop ? "text-sm text-muted-foreground" : undefined}
+          >
             Objects in locations you want to avoid are not false positives.
             Submitting them as false positives will confuse the model.
-        </DialogDescription>
+          </Description>
         </DialogHeader>
         <TransformComponent
           wrapperStyle={{
@@ -106,7 +123,7 @@ export function FrigatePlusDialog({
           )}
         </TransformComponent>
 
-      <DialogFooter>
+        <DialogFooter className="flex flex-row justify-end gap-2">
           {state == "reviewing" && (
             <>
               {dialog && <Button onClick={onClose}>Cancel</Button>}
@@ -133,6 +150,7 @@ export function FrigatePlusDialog({
           )}
           {state == "uploading" && <ActivityIndicator />}
         </DialogFooter>
+      </div>
     </TransformWrapper>
   );