feat(F-059): completed feature

project/apps/admin/src/features/products/components/sections/ImagesSection.tsx

@@ -173,12 +173,17 @@ export function ImagesSection({ productId }: ImagesSectionProps) {
         <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
           {images.map((img, idx) => (
             <div key={img.id} className="relative group">
-              {/* Use 200px thumbnail for editor preview to reduce bandwidth */}
-              <img
-                src={img.url.replace('/uploads/', '/uploads/200/')}
-                alt={img.altText ?? img.url}
-                className="w-full aspect-square object-cover rounded-xl bg-gray-100"
-              />
+              {/* Use 200px thumbnail for editor preview to reduce bandwidth.
+                  Container caps the bounding box (max 280px tall to match the
+                  1.4 aspect ratio used by the backend thumbnail); the image
+                  preserves its source aspect ratio via `object-contain`. */}
+              <div className="w-full max-h-72 aspect-[5/7] bg-gray-100 rounded-xl overflow-hidden flex items-center justify-center">
+                <img
+                  src={img.url.replace('/uploads/', '/uploads/200/')}
+                  alt={img.altText ?? img.url}
+                  className="max-w-full max-h-full w-auto h-auto object-contain"
+                />
+              </div>
               {/* Main badge */}
               {idx === 0 && (
                 <span className="absolute top-2 left-2 px-2 py-0.5 bg-[#2D6A4F] text-white text-xs font-medium rounded-full">