Cleanup mobile styling

frigate/embeddings/maintainer.py

@@ -292,11 +292,9 @@ class EmbeddingMaintainer(threading.Thread):
                 f"Received classification config update for model: {model_name}"
             )
 
-            # Update config
             self.config.classification.custom[model_name] = model_config
-
-            # Check if processor already exists for this model
             existing_processor_index = None
+
             for i, processor in enumerate(self.realtime_processors):
                 if isinstance(
                     processor,
@@ -309,14 +307,12 @@ class EmbeddingMaintainer(threading.Thread):
                         existing_processor_index = i
                         break
 
-            # Remove existing processor if found
             if existing_processor_index is not None:
                 logger.info(
                     f"Removing existing classification processor for model: {model_name}"
                 )
                 self.realtime_processors.pop(existing_processor_index)
 
-            # Add new processor
             if model_config.state_config is not None:
                 processor = CustomStateClassificationProcessor(
                     self.config, model_config, self.requestor, self.metrics

web/src/components/classification/wizard/Step2StateArea.tsx

@@ -16,6 +16,8 @@ import { useResizeObserver } from "@/hooks/resize-observer";
 import { useApiHost } from "@/api";
 import { resolveCameraName } from "@/hooks/use-camera-friendly-name";
 import Heading from "@/components/ui/heading";
+import { isMobile } from "react-device-detect";
+import { cn } from "@/lib/utils";
 
 export type CameraAreaConfig = {
   camera: string;
@@ -222,8 +224,18 @@ export default function Step2StateArea({
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex gap-4 overflow-hidden">
+      <div
-        <div className="flex w-64 flex-shrink-0 flex-col gap-2 overflow-y-auto rounded-lg bg-secondary p-4">
+        className={cn(
+          "flex gap-4 overflow-hidden",
+          isMobile ? "flex-col" : "flex-row",
+        )}
+      >
+        <div
+          className={cn(
+            "flex flex-shrink-0 flex-col gap-2 overflow-y-auto rounded-lg bg-secondary p-4",
+            isMobile ? "w-full" : "w-64",
+          )}
+        >
           <div className="flex items-center justify-between">
             <h3 className="text-sm font-medium">{t("wizard.step2.cameras")}</h3>
             {availableCameras.length > 0 ? (

web/src/components/classification/wizard/Step3ChooseExamples.tsx

@@ -15,6 +15,8 @@ import { Step1FormData } from "./Step1NameAndDefine";
 import { Step2FormData } from "./Step2StateArea";
 import useSWR from "swr";
 import { baseUrl } from "@/api/baseUrl";
+import { isMobile } from "react-device-detect";
+import { cn } from "@/lib/utils";
 
 export type Step3FormData = {
   examplesGenerated: boolean;
@@ -245,7 +247,12 @@ export default function Step3ChooseExamples({
           <div className="text-sm text-muted-foreground">
             {t("wizard.step3.description")}
           </div>
-          <div className="rounded-lg bg-secondary/30 p-4">
+          <div
+            className={cn(
+              "rounded-lg bg-secondary/30 p-4",
+              isMobile && "max-h-[60vh] overflow-y-auto",
+            )}
+          >
             {!unknownImages || unknownImages.length === 0 ? (
               <div className="flex h-[40vh] items-center justify-center">
                 <p className="text-muted-foreground">
@@ -253,11 +260,11 @@ export default function Step3ChooseExamples({
                 </p>
               </div>
             ) : (
-              <div className="grid grid-cols-6 gap-3">
+              <div className="grid grid-cols-2 gap-3 sm:grid-cols-6">
                 {unknownImages.slice(0, 24).map((imageName, index) => (
                   <div
                     key={imageName}
-                    className="group relative aspect-square cursor-pointer overflow-hidden rounded-lg border bg-background transition-all hover:ring-2 hover:ring-primary"
+                    className="group relative aspect-square overflow-hidden rounded-lg border bg-background"
                   >
                     <img
                       src={`${baseUrl}clips/${step1Data.modelName}/train/${imageName}`}