fix cors

app/[locale]/products/[id]/customization-experience.tsx

@@ -331,17 +331,18 @@ function CustomizationExperienceInner({
             <header className={styles.header}>
               <span className={pageStyles.seller}>{sellerName}</span>
               <h1 className={pageStyles.title}>{productName}</h1>
-              {categoryLink && (
-                <Link
-                  href={`/${locale}?category=${categoryLink.slug}`}
-                  className={styles.categoryLink}
-                >
-                  {labels.categoryLabel}: {categoryLink.name}
-                </Link>
-              )}
               <p className={pageStyles.description}>{productDescription}</p>
             </header>
 
+            {categoryLink && (
+              <Link
+                href={`/${locale}?category=${categoryLink.slug}`}
+                className={styles.categoryLink}
+              >
+                {labels.categoryLabel}: {categoryLink.name}
+              </Link>
+            )}
+
             <ProductShowcaseGallery
               items={publicMedia}
               labels={{

app/[locale]/products/[id]/mockup-canvas-control.tsx

@@ -23,11 +23,12 @@ import {
   MIN_DESIGN_SCALE_PERCENT,
   type DesignPosition,
 } from '@/modules/products/domain/value-objects/product-customization-config';
-import { drawCover, drawDesign } from '@/shared/presentation/canvas-utils';
+import { drawContain, drawDesign } from '@/shared/presentation/canvas-utils';
 import styles from './mockup-canvas-control.module.css';
 
-const CANVAS_WIDTH = 300;
-const CANVAS_HEIGHT = 225;
+// Keep enough backing pixels for the responsive canvas when the device DPR is 1.
+const CANVAS_WIDTH = 600;
+const CANVAS_HEIGHT = 450;
 
 interface MockupCanvasControlLabels {
   canvasLabel: string;
@@ -129,7 +130,7 @@ export function MockupCanvasControl({
       productImage.complete &&
       productImage.naturalWidth > 0
     ) {
-      drawCover(ctx, productImage, CANVAS_WIDTH, CANVAS_HEIGHT);
+      drawContain(ctx, productImage, CANVAS_WIDTH, CANVAS_HEIGHT);
     }
 
     const designImage = designImageRef.current;

components/products/infinite-product-list.tsx

@@ -218,6 +218,7 @@ export function InfiniteProductList({
                     height={640}
                     unoptimized
                     className={styles.productCoverImage}
+                    crossOrigin="anonymous"
                   />
                 ) : (
                   <div className={styles.productCoverPlaceholder}>

modules/presentation/components/design-preview.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef } from 'react';
 import {
   loadImage,
-  drawCover,
+  drawContain,
   drawDesign,
 } from '@/shared/presentation/canvas-utils';
 
@@ -52,7 +52,7 @@ export function DesignPreview({
       c.fillRect(0, 0, width, height);
 
       if (productImg) {
-        drawCover(c, productImg, width, height);
+        drawContain(c, productImg, width, height);
       }
 
       if (designImg) {

modules/products/application/update-product-use-case.ts

@@ -107,7 +107,13 @@ function buildTranslations(
       throw new ValidationError('Product locale is required');
     }
 
-    const name = (translation.name ?? dto.name ?? '').trim();
+    const existingTranslation = merged.get(locale);
+    const name = (
+      translation.name ??
+      dto.name ??
+      existingTranslation?.name ??
+      ''
+    ).trim();
 
     if (!name) {
       throw new ValidationError('Product name is required');
@@ -116,14 +122,19 @@ function buildTranslations(
     merged.set(locale, {
       locale,
       name,
-      description: translation.description?.trim() || null,
-      tags: translation.tags ?? [],
-      sizes: translation.sizes ?? [],
+      description:
+        translation.description === undefined
+          ? (existingTranslation?.description ?? null)
+          : translation.description.trim() || null,
+      tags: translation.tags ?? existingTranslation?.tags ?? [],
+      sizes: translation.sizes ?? existingTranslation?.sizes ?? [],
       designChangeDescription:
-        translation.designChangeDescription?.trim() || null,
+        translation.designChangeDescription === undefined
+          ? (existingTranslation?.designChangeDescription ?? null)
+          : translation.designChangeDescription?.trim() || null,
       photoLabels:
         cleanPhotoLabels(translation.photoLabels, product) ??
-        merged.get(locale)?.photoLabels ??
+        existingTranslation?.photoLabels ??
         {},
     });
   }

shared/presentation/canvas-utils.ts

@@ -8,7 +8,7 @@ export function loadImage(src: string): Promise<HTMLImageElement | null> {
   });
 }
 
-export function drawCover(
+export function drawContain(
   ctx: CanvasRenderingContext2D,
   image: HTMLImageElement,
   width: number,
@@ -20,11 +20,11 @@ export function drawCover(
   let drawHeight: number;
 
   if (ratio > targetRatio) {
-    drawHeight = height;
-    drawWidth = height * ratio;
-  } else {
     drawWidth = width;
     drawHeight = width / ratio;
+  } else {
+    drawHeight = height;
+    drawWidth = height * ratio;
   }
 
   const offsetX = (width - drawWidth) / 2;

tests/unit/app/[locale]/products/[id]/customization-experience.test.tsx

@@ -172,6 +172,29 @@ describe('CustomizationExperience', () => {
     expect(props.customization.imageUrl).toBe('/upload.png');
   });
 
+  it('places the category link between the description and gallery', () => {
+    render(
+      <CustomizationExperience
+        {...commonProps}
+        customizationConfig={ProductCustomizationConfig.default().toJson()}
+        labels={labels}
+      />,
+    );
+
+    const categoryLink = screen.getByRole('link', { name: 'Category: Mugs' });
+    const description = screen.getByText('A nice mug');
+    const gallery = screen.getByTestId('showcase-gallery');
+
+    expect(
+      description.compareDocumentPosition(categoryLink) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(
+      categoryLink.compareDocumentPosition(gallery) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
   it('keeps the previous image until the selected image is decoded', async () => {
     const decodeResolvers: Array<() => void> = [];
     class MockImage {

tests/unit/app/[locale]/products/[id]/mockup-canvas-control.test.tsx

@@ -65,8 +65,8 @@ describe('MockupCanvasControl backing store', () => {
     const { getByLabelText } = renderCanvas();
     const canvas = getByLabelText('Canvas') as HTMLCanvasElement;
 
-    expect(canvas.width).toBe(600);
-    expect(canvas.height).toBe(450);
+    expect(canvas.width).toBe(1200);
+    expect(canvas.height).toBe(900);
     expect(canvas.style.width).toBe('');
     expect(canvas.style.height).toBe('');
     expect(context.setTransform).toHaveBeenCalledWith(2, 0, 0, 2, 0, 0);
@@ -80,17 +80,17 @@ describe('MockupCanvasControl backing store', () => {
     const { getByLabelText } = renderCanvas();
     const canvas = getByLabelText('Canvas') as HTMLCanvasElement;
 
-    expect(canvas.width).toBe(300);
-    expect(canvas.height).toBe(225);
+    expect(canvas.width).toBe(600);
+    expect(canvas.height).toBe(450);
 
     Object.defineProperty(globalThis, 'devicePixelRatio', {
       configurable: true,
       value: 3,
     });
     globalThis.dispatchEvent(new Event('resize'));
 
-    expect(canvas.width).toBe(900);
-    expect(canvas.height).toBe(675);
+    expect(canvas.width).toBe(1800);
+    expect(canvas.height).toBe(1350);
     expect(context.setTransform).toHaveBeenLastCalledWith(3, 0, 0, 3, 0, 0);
   });
 

tests/unit/components/products/infinite-product-list.test.tsx

@@ -209,7 +209,10 @@ describe('InfiniteProductList', () => {
       />,
     );
 
-    expect(screen.getByAltText('Mug cover')).toBeInTheDocument();
+    expect(screen.getByAltText('Mug cover')).toHaveAttribute(
+      'crossorigin',
+      'anonymous',
+    );
   });
 
   it('shows a placeholder when a cover is missing', () => {

tests/unit/modules/products/application/update-product-use-case.test.ts

@@ -176,6 +176,32 @@ describe('UpdateProductUseCase', () => {
     );
   });
 
+  it('preserves an untouched locale and omitted fields from a partial update', async () => {
+    const repo = new MemoryProductRepository();
+    repo.seed([makeProduct()]);
+
+    const result = await new UpdateProductUseCase(repo).execute({
+      productId: 'p-1',
+      sellerId: 'seller-1',
+      translations: [{ locale: 'es', name: 'Taza editada' }],
+    });
+
+    expect(result.translations).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          locale: 'es',
+          name: 'Taza editada',
+          description: 'Una taza',
+        }),
+        expect.objectContaining({
+          locale: 'cat',
+          name: 'Tassa',
+          description: 'Una tassa',
+        }),
+      ]),
+    );
+  });
+
   it('cleans stale photo label keys and preserves omitted locale labels', async () => {
     const repo = new MemoryProductRepository();
     repo.seed([

tests/unit/shared/presentation/canvas-utils.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it, vi } from 'vitest';
+import { drawContain } from '@/shared/presentation/canvas-utils';
+
+function drawImageFor(naturalWidth: number, naturalHeight: number) {
+  const ctx = { drawImage: vi.fn() } as unknown as CanvasRenderingContext2D;
+  const image = { naturalWidth, naturalHeight } as HTMLImageElement;
+
+  drawContain(ctx, image, 600, 450);
+
+  return ctx.drawImage;
+}
+
+describe('drawContain', () => {
+  it('fits a wide image and centers it with vertical margins', () => {
+    expect(drawImageFor(1600, 900)).toHaveBeenCalledWith(
+      expect.anything(),
+      0,
+      56.25,
+      600,
+      337.5,
+    );
+  });
+
+  it('fits a tall image and centers it with horizontal margins', () => {
+    expect(drawImageFor(900, 1600)).toHaveBeenCalledWith(
+      expect.anything(),
+      173.4375,
+      0,
+      253.125,
+      450,
+    );
+  });
+});