little bit of ui clean up and fixing the platform labels/keys

components/parts/PartsGrid.tsx

@@ -92,7 +92,8 @@ export default function PartsGrid(props: {
   return (
     <>
       {/* Header (DESKTOP ONLY) */}
-      <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">
+      <div className="hidden md:grid md:grid-cols-[44px_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="sr-only">Image</span>
         <span className="min-w-0">Part</span>
         <span className="text-right">Caliber</span>
         <span className="text-right">Price</span>
@@ -106,7 +107,21 @@ 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,1fr)_120px_110px_120px] md:items-center md:gap-4">
+            <div className="flex flex-col gap-2 md:grid md:grid-cols-[44px_minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4">
+              {/* Image */}
+              <div className="hidden md:block">
+                {part.imageUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={part.imageUrl}
+                    alt=""
+                    className="h-10 w-10 rounded object-cover border border-zinc-800 bg-zinc-950"
+                    loading="lazy"
+                  />
+                ) : (
+                  <div className="h-10 w-10 rounded border border-zinc-800 bg-zinc-950" />
+                )}
+              </div>
               {/* Part */}
               <div className="min-w-0">
                 <Link