small product grid cleanup

components/parts/PartsGrid.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import Link from "next/link";
+import { Plus } from "lucide-react";
 
 type UiPart = {
   id: string;
   name: string;
   brand: string;
+  caliber?: string;
   platform: string;
   partRole: string;
   price: number;
@@ -36,7 +38,8 @@ export default function PartsGrid(props: {
             <div className="mb-3 flex items-center justify-between gap-2">
               <div className="min-w-0">
                 <div className="truncate text-sm font-semibold text-zinc-50">
-                  {part.brand} <span className="font-normal">— {part.name}</span>
+                  {part.brand}{" "}
+                  <span className="font-normal">— {part.name}</span>
                 </div>
               </div>
 
@@ -89,8 +92,9 @@ export default function PartsGrid(props: {
   return (
     <>
       {/* Header (DESKTOP ONLY) */}
-      <div className="hidden md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_260px] md:items-center md:gap-4 px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500">        <span className="min-w-0">Part</span>
+      <div className="hidden md:grid md:grid-cols-[minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4 px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500">
-        <span className="min-w-0">Brand</span>
+        <span className="min-w-0">Part</span>
+        <span className="text-right">Caliber</span>
         <span className="text-right">Price</span>
         <span className="text-right">Actions</span>
       </div>
@@ -102,17 +106,27 @@ export default function PartsGrid(props: {
             key={part.id}
             className="group relative rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
           >
-            <div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_260px] md:items-center md:gap-4">
+            <div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4">
               {/* Part */}
               <div className="min-w-0">
-                <div className="truncate text-sm font-semibold text-zinc-50">
+                <Link
+                  href={buildDetailHref(part)}
+                  className="block text-sm font-semibold text-zinc-50 leading-snug line-clamp-2 break-words hover:text-amber-300 transition-colors"
+                  title={part.name}
+                >
                   {part.name}
-                </div>
+                </Link>
-              </div>
+                {/* Dont think we need Brand in the grid */}
-
+                {/* <div className="mt-0.5 text-xs text-zinc-500 line-clamp-1">
-              {/* Brand */}
-              <div className="min-w-0 text-xs text-zinc-400 md:text-sm">
                   {part.brand}
+                  {part.caliber ? (
+                    <span className="text-zinc-600"> • {part.caliber}</span>
+                  ) : null}
+                </div> */}
+              </div>
+              {/* Caliber (desktop) */}
+              <div className="hidden md:block text-sm text-zinc-300 text-right">
+                {part.caliber ?? "—"}
               </div>
 
               {/* Price */}
@@ -122,20 +136,15 @@ export default function PartsGrid(props: {
 
               {/* Actions */}
               <div className="flex justify-end gap-2">
-                <Link
-                  href={buildDetailHref(part)}
-                  className="whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:border-zinc-600 hover:bg-zinc-700"
-                >
-                  View Details
-                </Link>
-
                 {onAddToBuild ? (
                   <button
                     type="button"
                     onClick={() => onAddToBuild(part)}
-                    className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
+                    className="inline-flex items-center justify-center h-8 w-8 rounded-md bg-amber-400 text-black hover:bg-amber-300 transition-colors"
+                    aria-label="Add to Build"
+                    title="Add to Build"
                   >
-                    {addLabel}
+                    <Plus className="h-4 w-4" />
                   </button>
                 ) : part.buyUrl ? (
                   <a