From 6d662151de6d1d9f4fb29d878738482d1bb278c2 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 21 Oct 2025 15:55:37 -0600
Subject: [PATCH] Clean up mobile

---
 .../components/card/ClassificationCard.tsx    | 24 +++++++++++++++----
 web/src/pages/FaceLibrary.tsx                 |  7 ++++--
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/web/src/components/card/ClassificationCard.tsx b/web/src/components/card/ClassificationCard.tsx
index c074a42a4..7ef889176 100644
--- a/web/src/components/card/ClassificationCard.tsx
+++ b/web/src/components/card/ClassificationCard.tsx
@@ -272,7 +272,15 @@ export function GroupedClassificationCard({
         }}
       >
         <Trigger asChild></Trigger>
-        <Content className={cn("", isDesktop && "w-auto max-w-[85%]")}>
+        <Content
+          className={cn(
+            "",
+            isDesktop && "w-auto max-w-[85%]",
+            !isDesktop &&
+              "max-h-[75dvh] overflow-hidden rounded-t-2xl px-4 pb-4",
+          )}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
           <>
             {isDesktop && (
               <div className="absolute right-10 top-4 flex flex-row justify-between">
@@ -300,7 +308,12 @@ export function GroupedClassificationCard({
                 )}
               </div>
             )}
-            <ContentTitle className="flex items-center gap-1 font-normal capitalize">
+            <ContentTitle
+              className={cn(
+                "flex items-center gap-1 font-normal capitalize",
+                isMobile && "px-2",
+              )}
+            >
               {event?.sub_label ? event.sub_label : t("details.unknown")}
               {event?.sub_label && (
                 <div
@@ -313,7 +326,7 @@ export function GroupedClassificationCard({
                 >{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div>
               )}
             </ContentTitle>
-            <ContentDescription>
+            <ContentDescription className={cn("", isMobile && "px-2")}>
               {time && (
                 <TimeAgo
                   className="text-sm text-secondary-foreground"
@@ -324,8 +337,9 @@ export function GroupedClassificationCard({
             </ContentDescription>
             <div
               className={cn(
-                "flex cursor-pointer flex-col gap-2 rounded-lg p-2",
-                isMobile && "w-full",
+                "flex cursor-pointer flex-col gap-2 rounded-lg",
+                isDesktop && "p-2",
+                isMobile && "scrollbar-container w-full overflow-y-auto",
               )}
             >
               <div
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index a982f7df0..dcbff4e04 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -51,7 +51,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 {
   LuFolderCheck,
@@ -694,7 +694,10 @@ function TrainingGrid({
   return (
     <div
       ref={contentRef}
-      className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
+      className={cn(
+        "scrollbar-container gap-2 overflow-y-scroll p-1",
+        isMobileOnly ? "grid grid-cols-2" : "flex flex-wrap",
+      )}
     >
       {Object.entries(faceGroups).map(([key, group]) => {
         const event = events?.find((ev) => ev.id == key);