Change animal page layout

src/components/artworks/ArtworkThumbGallery.tsx

@@ -20,13 +20,10 @@ type FitMode =
   | { mode: "fixedHeight"; height: number }; // width varies
 
 function getOverlayTextClass(okLabL: number | null | undefined) {
-  // if okLabL is 0..100, change threshold to ~65
-  // if (typeof okLabL === "number") return okLabL >= 0.65 ? "text-black" : "text-white";
   return "text-white";
 }
 
 function getOverlayBgClass(okLabL: number | null | undefined) {
-  // if (typeof okLabL === "number") return okLabL >= 0.65 ? "bg-white/60" : "bg-black/45";
   return "bg-black/45";
 }
 
@@ -58,7 +55,12 @@ export default function ArtworkThumbGallery({
   }
 
   return (
-    <div className="flex flex-wrap gap-4">
+    <div
+      className="grid gap-3.5 justify-center"
+      style={{
+        gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
+      }}
+    >
       {items.map((a) => {
         const textClass = getOverlayTextClass(a.okLabL);
         const bgClass = getOverlayBgClass(a.okLabL);
@@ -68,13 +70,13 @@ export default function ArtworkThumbGallery({
 
         const tileStyle: React.CSSProperties =
           fit.mode === "fixedWidth"
-            ? { width: fit.width, aspectRatio: `${w} / ${h}` }
+            ? { aspectRatio: `${w} / ${h}` }
             : { height: fit.height, aspectRatio: `${w} / ${h}` };
 
         const sheet = openSheet[a.id] ?? null;
 
         return (
-          <div key={a.id} style={tileStyle}>
+          <div key={a.id} className="w-full" style={tileStyle}>
             <div className="relative h-full w-full overflow-hidden rounded-md border">
               <Link href={`${hrefBase}/single/${a.id}`} className="block h-full w-full">
                 <Image
@@ -83,7 +85,7 @@ export default function ArtworkThumbGallery({
                   fill
                   className="object-cover"
                   loading="lazy"
-                  sizes={fit.mode === "fixedWidth" ? `${fit.width}px` : undefined}
+                  sizes="(min-width: 1280px) 20vw, (min-width: 1024px) 25vw, (min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
                 />
               </Link>
 
@@ -105,95 +107,7 @@ export default function ArtworkThumbGallery({
                 className="absolute left-0 right-0 bottom-0 z-20 flex items-center justify-between px-2"
                 style={{ height: BUTTON_BAR_HEIGHT }}
               >
-                {/* Tags button */}
-                {/* <button
-                  type="button"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    toggleSheet(a.id, "tags");
-                  }}
-                  className={cn(
-                    "rounded px-2 py-1 text-xs font-medium",
-                    bgClass,
-                    textClass,
-                    "hover:opacity-90"
-                  )}
-                >
-                  Tags
-                </button> */}
-
-                {/* Alt button */}
-                {/* <button
-                  type="button"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    toggleSheet(a.id, "alt");
-                  }}
-                  className={cn(
-                    "rounded px-2 py-1 text-xs font-medium",
-                    bgClass,
-                    textClass,
-                    "hover:opacity-90"
-                  )}
-                >
-                  Alt
-                </button> */}
               </div>
-
-              {/* Bottom sheet — stops ABOVE button bar */}
-              {/* <div
-                className={cn(
-                  "absolute left-0 right-0 z-10",
-                  "transition-transform duration-200 ease-out",
-                  sheet ? "translate-y-0" : "translate-y-full"
-                )}
-                style={{ bottom: BUTTON_BAR_HEIGHT }}
-              >
-                <div className="rounded-t-md  px-3 py-3 backdrop-blur-[2px]">
-                  {sheet === "alt" ? (
-                    <div className="space-y-2">
-                      <div className="text-sm text-white">
-                        {a.altText?.trim() ? a.altText : "No alt text set."}
-                      </div>
-                    </div>
-                  ) : null}
-
-                  {sheet === "tags" ? (
-                    <div className="space-y-2">
-                      <div className="flex flex-wrap gap-2">
-                        {a.tags.length > 0 ? (
-                          a.tags.map((t) => (
-                            <span
-                              key={t.id}
-                              className="rounded bg-white/15 px-2 py-1 text-xs text-white"
-                            >
-                              {t.name}
-                            </span>
-                          ))
-                        ) : (
-                          <span className="text-sm text-white/90">No tags set.</span>
-                        )}
-                      </div>
-                    </div>
-                  ) : null}
-                </div>
-              </div> */}
-
-              {/* Optional click-away close */}
-              {/* {sheet ? (
-                <button
-                  type="button"
-                  aria-label="Close overlay"
-                  className="absolute inset-0 z-5 cursor-default"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setOpenSheet((prev) => ({ ...prev, [a.id]: null }));
-                  }}
-                />
-              ) : null} */}
             </div>
           </div>
         );