Cleanup grid

web/src/components/card/ClassificationCard.tsx

@@ -34,6 +34,7 @@ import {
 } from "../mobile/MobilePage";
 
 type ClassificationCardProps = {
+  className?: string;
   imgClassName?: string;
   data: ClassificationItemData;
   threshold?: ClassificationThreshold;
@@ -49,6 +50,7 @@ export const ClassificationCard = forwardRef<
   ClassificationCardProps
 >(function ClassificationCard(
   {
+    className,
     imgClassName,
     data,
     threshold,
@@ -98,8 +100,8 @@ export const ClassificationCard = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]",
+        "relative flex size-full cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]",
-        isMobile ? "!size-full" : "size-48",
+        className,
         selected
           ? "shadow-selected outline-selected"
           : "outline-transparent duration-500",
@@ -217,7 +219,7 @@ export function GroupedClassificationCard({
     const bestTyped: ClassificationItemData = best;
     return {
       ...bestTyped,
-      name: event?.sub_label || bestTyped.name,
+      name: event ? (event.sub_label ?? "") : bestTyped.name,
       score: event?.data?.sub_label_score || bestTyped.score,
     };
   }, [group, event]);
@@ -287,7 +289,7 @@ export function GroupedClassificationCard({
         <Content
           className={cn(
             "",
-            isDesktop && "w-auto max-w-[85%]",
+            isDesktop && "min-w-[50%] max-w-[65%]",
             isMobile && "flex flex-col",
           )}
           onOpenAutoFocus={(e) => e.preventDefault()}
@@ -357,40 +359,31 @@ export function GroupedClassificationCard({
             </Header>
             <div
               className={cn(
-                "flex cursor-pointer flex-col gap-2 rounded-lg",
+                "size-full gap-2",
                 isDesktop && "p-2",
                 isMobile && "scrollbar-container w-full flex-1 overflow-y-auto",
+                isDesktop
+                  ? "grid grid-cols-6"
+                  : "grid grid-cols-2 justify-items-center gap-2 px-2 sm:grid-cols-5 lg:grid-cols-6",
               )}
             >
-              <div
+              {group.map((data: ClassificationItemData) => (
-                className={cn(
+                <div key={data.filename} className="aspect-square w-full">
-                  "gap-2",
+                  <ClassificationCard
-                  isDesktop
+                    data={data}
-                    ? "flex flex-row flex-wrap"
+                    threshold={threshold}
-                    : "grid grid-cols-2 justify-items-center gap-2 px-2 sm:grid-cols-5 lg:grid-cols-6",
+                    selected={false}
-                )}
+                    i18nLibrary={i18nLibrary}
-              >
+                    onClick={(data, meta) => {
-                {group.map((data: ClassificationItemData) => (
+                      if (meta || selectedItems.length > 0) {
-                  <div
+                        onClick(data);
-                    key={data.filename}
+                      }
-                    className={cn(isMobile && "aspect-square size-full")}
+                    }}
                   >
-                    <ClassificationCard
+                    {children?.(data)}
-                      data={data}
+                  </ClassificationCard>
-                      threshold={threshold}
+                </div>
-                      selected={false}
+              ))}
-                      i18nLibrary={i18nLibrary}
-                      onClick={(data, meta) => {
-                        if (meta || selectedItems.length > 0) {
-                          onClick(data);
-                        }
-                      }}
-                    >
-                      {children?.(data)}
-                    </ClassificationCard>
-                  </div>
-                ))}
-              </div>
             </div>
           </>
         </Content>

web/src/pages/FaceLibrary.tsx

@@ -695,16 +695,13 @@ function TrainingGrid({
     <div
       ref={contentRef}
       className={cn(
-        "scrollbar-container gap-3 overflow-y-scroll p-1",
+        "scrollbar-container grid grid-cols-2 gap-3 overflow-y-scroll p-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12",
-        isMobile
-          ? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8"
-          : "flex flex-wrap",
       )}
     >
       {Object.entries(faceGroups).map(([key, group]) => {
         const event = events?.find((ev) => ev.id == key);
         return (
-          <div key={key} className={cn(isMobile && "aspect-square size-full")}>
+          <div key={key} className="aspect-square w-full">
             <FaceAttemptGroup
               config={config}
               group={group}
@@ -914,35 +911,35 @@ function FaceGrid({
     <div
       ref={contentRef}
       className={cn(
-        "scrollbar-container gap-2 overflow-y-scroll p-1",
+        "scrollbar-container grid grid-cols-2 gap-2 overflow-y-scroll p-1 md:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12",
-        isDesktop ? "flex flex-wrap" : "grid grid-cols-2 md:grid-cols-4",
       )}
     >
       {sortedFaces.map((image: string) => (
-        <ClassificationCard
+        <div key={image} className="aspect-square w-full">
-          key={image}
+          <ClassificationCard
-          data={{
+            data={{
-            name: pageToggle,
+              name: pageToggle,
-            filename: image,
+              filename: image,
-            filepath: `clips/faces/${pageToggle}/${image}`,
+              filepath: `clips/faces/${pageToggle}/${image}`,
-          }}
+            }}
-          selected={selectedFaces.includes(image)}
+            selected={selectedFaces.includes(image)}
-          i18nLibrary="views/faceLibrary"
+            i18nLibrary="views/faceLibrary"
-          onClick={(data, meta) => onClickFaces([data.filename], meta)}
+            onClick={(data, meta) => onClickFaces([data.filename], meta)}
-        >
+          >
-          <Tooltip>
+            <Tooltip>
-            <TooltipTrigger>
+              <TooltipTrigger>
-              <LuTrash2
+                <LuTrash2
-                className="size-5 cursor-pointer text-gray-200 hover:text-danger"
+                  className="size-5 cursor-pointer text-gray-200 hover:text-danger"
-                onClick={(e) => {
+                  onClick={(e) => {
-                  e.stopPropagation();
+                    e.stopPropagation();
-                  onDelete(pageToggle, [image]);
+                    onDelete(pageToggle, [image]);
-                }}
+                  }}
-              />
+                />
-            </TooltipTrigger>
+              </TooltipTrigger>
-            <TooltipContent>{t("button.deleteFaceAttempts")}</TooltipContent>
+              <TooltipContent>{t("button.deleteFaceAttempts")}</TooltipContent>
-          </Tooltip>
+            </Tooltip>
-        </ClassificationCard>
+          </ClassificationCard>
+        </div>
       ))}
     </div>
   );

web/src/views/classification/ModelTrainingView.tsx

@@ -928,10 +928,7 @@ function ObjectTrainGrid({
       <div
         ref={contentRef}
         className={cn(
-          "scrollbar-container gap-3 overflow-y-scroll p-1",
+          "scrollbar-container grid grid-cols-2 gap-3 overflow-y-scroll p-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12",
-          isMobile
-            ? "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8"
-            : "flex flex-wrap",
         )}
       >
         {Object.entries(groups).map(([key, group]) => {