From bc73078264c68e9a03acac154640eadf811784f7 Mon Sep 17 00:00:00 2001
From: ashim-hq <ashim.hq@gmail.com>
Date: Sun, 19 Apr 2026 16:52:29 +0800
Subject: [PATCH] fix: fill cell background color when using contain fit mode

---
 apps/web/src/components/tools/collage-preview.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/web/src/components/tools/collage-preview.tsx b/apps/web/src/components/tools/collage-preview.tsx
index 94f31b32..216fda6c 100644
--- a/apps/web/src/components/tools/collage-preview.tsx
+++ b/apps/web/src/components/tools/collage-preview.tsx
@@ -257,6 +257,7 @@ function CollageCanvas({ template }: { template: CollageTemplate }) {
                   isDragSource={isDragSource}
                   gridColumn={cell.gridColumn}
                   gridRow={cell.gridRow}
+                  backgroundColor={backgroundColor}
                 />
               );
             })}
@@ -288,6 +289,7 @@ function CollageCell({
   isDragSource,
   gridColumn,
   gridRow,
+  backgroundColor,
 }: {
   cellIndex: number;
   image: CollageImage | null;
@@ -297,6 +299,7 @@ function CollageCell({
   isDragSource: boolean;
   gridColumn: string;
   gridRow: string;
+  backgroundColor: string;
 }) {
   const store = useCollageStore();
   const cellRef = useRef<HTMLDivElement>(null);
@@ -437,6 +440,7 @@ function CollageCell({
         borderRadius: `${cornerRadius}px`,
         minHeight: 0,
         touchAction: isSelected ? "none" : "auto",
+        backgroundColor: transform.objectFit === "contain" ? backgroundColor : undefined,
       }}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}