From 029fd544b8b72d22ed1176f5401d417aefdd2cc8 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 21 Oct 2025 20:49:33 -0600
Subject: [PATCH] Fix layout

---
 web/src/components/card/ClassificationCard.tsx     | 3 ++-
 web/src/pages/FaceLibrary.tsx                      | 9 +++++----
 web/src/views/classification/ModelTrainingView.tsx | 9 +++++++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/web/src/components/card/ClassificationCard.tsx b/web/src/components/card/ClassificationCard.tsx
index 2d0d1bdb9..e533a1597 100644
--- a/web/src/components/card/ClassificationCard.tsx
+++ b/web/src/components/card/ClassificationCard.tsx
@@ -98,7 +98,8 @@ export const ClassificationCard = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex size-48 cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]",
+        "relative flex cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]",
+        isMobile ? "!size-full" : "size-48",
         selected
           ? "shadow-selected outline-selected"
           : "outline-transparent duration-500",
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 7ea8ed950..78946d48e 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -51,7 +51,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { isDesktop, isMobileOnly } from "react-device-detect";
+import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import {
   LuFolderCheck,
@@ -696,15 +696,16 @@ function TrainingGrid({
       ref={contentRef}
       className={cn(
         "scrollbar-container gap-3 overflow-y-scroll p-1",
-        isMobileOnly ? "grid grid-cols-2" : "flex flex-wrap",
+        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>
+          <div key={key} className={cn(isMobile && "aspect-square size-full")}>
             <FaceAttemptGroup
-              key={key}
               config={config}
               group={group}
               event={event}
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index 22dfc5b27..136ba3fb8 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -929,13 +929,18 @@ function ObjectTrainGrid({
         ref={contentRef}
         className={cn(
           "scrollbar-container gap-3 overflow-y-scroll p-1",
-          isMobileOnly ? "grid grid-cols-2 px-2" : "flex flex-wrap",
+          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]) => {
           const event = events?.find((ev) => ev.id == key);
           return (
-            <div>
+            <div
+              key={key}
+              className={cn(isMobile && "aspect-square size-full")}
+            >
               <GroupedClassificationCard
                 key={key}
                 group={group}