Enable mobile view for classification and optimize for mobile layout

web/src/components/menu/GeneralSettings.tsx

@@ -65,6 +65,7 @@ import { useTranslation } from "react-i18next";
 import { supportedLanguageKeys } from "@/lib/const";
 
 import { useDocDomain } from "@/hooks/use-doc-domain";
+import { MdCategory } from "react-icons/md";
 
 type GeneralSettingsProps = {
   className?: string;
@@ -315,6 +316,19 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                   </Link>
                 </>
               )}
+              {isAdmin && isMobile && config?.face_recognition.enabled && (
+                <>
+                  <Link to="/classification">
+                    <MenuItem
+                      className="flex w-full items-center p-2 text-sm"
+                      aria-label={t("menu.classification")}
+                    >
+                      <MdCategory className="mr-2 size-4" />
+                      <span>{t("menu.classification")}</span>
+                    </MenuItem>
+                  </Link>
+                </>
+              )}
             </DropdownMenuGroup>
             <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
               {t("menu.appearance")}

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

@@ -60,7 +60,7 @@ export default function TrainFilterDialog({
           moreFiltersSelected ? "text-white" : "text-secondary-foreground",
         )}
       />
-      {t("more")}
+      {isDesktop && t("more")}
     </Button>
   );
   const content = (

web/src/views/classification/ModelSelectionView.tsx

@@ -79,7 +79,9 @@ function ModelCard({ config, onClick }: ModelCardProps) {
       )}
       onClick={() => onClick()}
     >
-      <div className="grid size-48 grid-cols-2 gap-2">
+      <div
+        className={cn("grid size-48 grid-cols-2 gap-2", isMobile && "w-full")}
+      >
         {Object.entries(coverImages).map(([key, image]) => (
           <img
             key={key}

web/src/views/classification/ModelTrainingView.tsx

@@ -362,7 +362,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
               ) : (
                 <MdAutoFixHigh className="text-secondary-foreground" />
               )}
-              {t("button.trainModel")}
+              {isDesktop && t("button.trainModel")}
             </Button>
           </div>
         )}
@@ -725,7 +725,12 @@ function TrainGrid({
   );
 
   return (
-    <div className="flex flex-wrap gap-2 overflow-y-auto p-2">
+    <div
+      className={cn(
+        "flex flex-wrap gap-2 overflow-y-auto p-2",
+        isMobile && "justify-center",
+      )}
+    >
       {trainData?.map((data) => (
         <div
           key={data.timestamp}
@@ -734,6 +739,7 @@ function TrainGrid({
             selectedImages.includes(data.raw)
               ? "shadow-selected outline-selected"
               : "outline-transparent duration-500",
+            isMobile && "w-[48%]",
           )}
           onClick={(e) => {
             e.stopPropagation();