Various Tweaks (#20713)

* Adjust for commutes

* Tweaks

* Don't show no models view in grid

* Add text-md to inputs

* Adjust train title for mobile

* Cleanup prompt more

* Use i18n functions for tooltip

* Fix model complexity causing crash

* Cleanup

web/src/views/classification/ModelSelectionView.tsx

@@ -130,22 +130,22 @@ export default function ModelSelectionView({
           </Button>
         </div>
       </div>
-      <div className="grid auto-rows-max grid-cols-2 gap-2 overflow-y-auto p-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 3xl:grid-cols-10">
-        {selectedClassificationConfigs.length === 0 ? (
-          <NoModelsView
-            onCreateModel={() => setNewModel(true)}
-            modelType={pageToggle}
-          />
-        ) : (
-          selectedClassificationConfigs.map((config) => (
+      {selectedClassificationConfigs.length === 0 ? (
+        <NoModelsView
+          onCreateModel={() => setNewModel(true)}
+          modelType={pageToggle}
+        />
+      ) : (
+        <div className="grid auto-rows-max grid-cols-2 gap-2 overflow-y-auto p-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 3xl:grid-cols-10">
+          {selectedClassificationConfigs.map((config) => (
             <ModelCard
               key={config.name}
               config={config}
               onClick={() => onClick(config)}
             />
-          ))
-        )}
-      </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

web/src/views/classification/ModelTrainingView.tsx

@@ -44,7 +44,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobileOnly } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import { LuPencil, LuTrash2 } from "react-icons/lu";
 import { toast } from "sonner";
@@ -436,8 +436,24 @@ function LibrarySelector({
   onRename,
 }: LibrarySelectorProps) {
   const { t } = useTranslation(["views/classificationModel"]);
+
+  // data
+
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
   const [renameClass, setRenameFace] = useState<string | null>(null);
+  const pageTitle = useMemo(() => {
+    if (pageToggle != "train") {
+      return pageToggle;
+    }
+
+    if (isMobileOnly) {
+      return t("train.titleShort");
+    }
+
+    return t("train.title");
+  }, [pageToggle, t]);
+
+  // interaction
 
   const handleDeleteFace = useCallback(
     (name: string) => {
@@ -507,7 +523,7 @@ function LibrarySelector({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button className="flex justify-between smart-capitalize">
-            {pageToggle == "train" ? t("train.title") : pageToggle}
+            {pageTitle}
             <span className="ml-2 text-primary-variant">
               (
               {(pageToggle &&