better arrangement of thumbnail footer items on smaller screens

web/src/components/card/SearchThumbnailFooter.tsx

@@ -33,9 +33,11 @@ import { toast } from "sonner";
 import { MdImageSearch } from "react-icons/md";
 import { isMobileOnly } from "react-device-detect";
 import { buttonVariants } from "../ui/button";
+import { cn } from "@/lib/utils";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
+  columns: number;
   findSimilar: () => void;
   refreshResults: () => void;
   showObjectLifecycle: () => void;
@@ -43,6 +45,7 @@ type SearchThumbnailProps = {
 
 export default function SearchThumbnailFooter({
   searchResult,
+  columns,
   findSimilar,
   refreshResults,
   showObjectLifecycle,
@@ -114,6 +117,13 @@ export default function SearchThumbnailFooter({
         }}
       />
 
+      <div
+        className={cn(
+          "flex w-full flex-row items-center justify-between",
+          columns > 4 &&
+            "items-start sm:flex-col sm:gap-2 lg:flex-row lg:items-center lg:gap-1",
+        )}
+      >
         <div className="flex flex-col items-start text-xs text-primary-variant">
           {searchResult.end_time ? (
             <TimeAgo time={searchResult.start_time * 1000} dense />
@@ -213,6 +223,7 @@ export default function SearchThumbnailFooter({
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
+      </div>
     </>
   );
 }

web/src/components/settings/SearchSettings.tsx

@@ -1,6 +1,6 @@
 import { Button } from "../ui/button";
 import { useState } from "react";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobileOnly } from "react-device-detect";
 import { cn } from "@/lib/utils";
 import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
 import { FaCog } from "react-icons/fa";
@@ -68,6 +68,8 @@ export default function SearchSettings({
           </SelectContent>
         </Select>
       </div>
+      {!isMobileOnly && (
+        <>
           <DropdownMenuSeparator />
           <div className="flex w-full flex-col space-y-4">
             <div className="space-y-0.5">
@@ -85,9 +87,13 @@ export default function SearchSettings({
                 step={1}
                 className="flex-grow"
               />
-          <span className="w-9 text-center text-sm font-medium">{columns}</span>
+              <span className="w-9 text-center text-sm font-medium">
+                {columns}
+              </span>
             </div>
           </div>
+        </>
+      )}
     </div>
   );
 

web/src/pages/Explore.tsx

@@ -14,6 +14,7 @@ import { ModelState } from "@/types/ws";
 import { formatSecondsToDuration } from "@/utils/dateUtil";
 import SearchView from "@/views/search/SearchView";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { isMobileOnly } from "react-device-detect";
 import { LuCheck, LuExternalLink, LuX } from "react-icons/lu";
 import { TbExclamationCircle } from "react-icons/tb";
 import { Link } from "react-router-dom";
@@ -32,7 +33,12 @@ export default function Explore() {
   // grid
 
   const [columnCount, setColumnCount] = usePersistence("exploreGridColumns", 4);
-  const gridColumns = useMemo(() => columnCount ?? 4, [columnCount]);
+  const gridColumns = useMemo(() => {
+    if (isMobileOnly) {
+      return 2;
+    }
+    return columnCount ?? 4;
+  }, [columnCount]);
 
   // default layout
 

web/src/views/search/SearchView.tsx

@@ -387,7 +387,7 @@ export default function SearchView({
                     key={value.id}
                     ref={(item) => (itemRefs.current[index] = item)}
                     data-start={value.start_time}
-                    className="review-item relative rounded-lg"
+                    className="review-item relative flex flex-col rounded-lg"
                   >
                     <div
                       className={cn(
@@ -402,9 +402,10 @@ export default function SearchView({
                     <div
                       className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
                     />
-                    <div className="flex w-full items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
+                    <div className="flex w-full grow items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
                       <SearchThumbnailFooter
                         searchResult={value}
+                        columns={columns}
                         findSimilar={() => {
                           if (config?.semantic_search.enabled) {
                             setSimilaritySearch(value);