From 0c8e8c075c6ea9334dcbc8fb0a0b5131144889d7 Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Mon, 11 May 2026 16:48:51 +0800
Subject: [PATCH] fix: remove checkerboard bleed in before-after slider and
 image viewer

The before-after slider hardcoded a checkerboard background on the
entire "after" overlay, which filled letterbox/pillarbox space around
non-transparent images. Replaced with a neutral bg-muted/30.

In image-viewer, moved the checkerboard from the outer container
(which included padding) to the img element itself, so it only
shows through transparent pixels rather than the surrounding area.
---
 .../src/components/common/before-after-slider.tsx   | 11 ++---------
 apps/web/src/components/common/image-viewer.tsx     | 13 +++++++------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/components/common/before-after-slider.tsx b/apps/web/src/components/common/before-after-slider.tsx
index 975c6fcb..d2ae6eb1 100644
--- a/apps/web/src/components/common/before-after-slider.tsx
+++ b/apps/web/src/components/common/before-after-slider.tsx
@@ -114,15 +114,8 @@ export function BeforeAfterSlider({
 
         {/* After image (clipped, top layer) */}
         <div
-          className="absolute inset-0"
-          style={{
-            clipPath: `inset(0 0 0 ${position}%)`,
-            backgroundImage:
-              "linear-gradient(45deg, #d1d5db 25%, transparent 25%), linear-gradient(-45deg, #d1d5db 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d1d5db 75%), linear-gradient(-45deg, transparent 75%, #d1d5db 75%)",
-            backgroundSize: "16px 16px",
-            backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0",
-            backgroundColor: "#f9fafb",
-          }}
+          className="absolute inset-0 bg-muted/30"
+          style={{ clipPath: `inset(0 0 0 ${position}%)` }}
         >
           <img
             src={afterSrc}
diff --git a/apps/web/src/components/common/image-viewer.tsx b/apps/web/src/components/common/image-viewer.tsx
index 83ffee95..a01ed866 100644
--- a/apps/web/src/components/common/image-viewer.tsx
+++ b/apps/web/src/components/common/image-viewer.tsx
@@ -107,12 +107,17 @@ export function ImageViewer({
     .filter(Boolean)
     .join(" ");
 
+  const checkerBg = bgPreview?.showCheckerboard
+    ? { background: "repeating-conic-gradient(#d0d0d0 0% 25%, #f0f0f0 0% 50%) 0 0 / 20px 20px" }
+    : {};
+
   const imageStyle =
     fitMode === "fit"
       ? {
           maxWidth: "100%",
           maxHeight: "100%",
           objectFit: "contain" as const,
+          ...checkerBg,
           ...(previewTransform && {
             transform: previewTransform,
             transition: "transform 0.25s ease, filter 0.15s ease",
@@ -122,6 +127,7 @@ export function ImageViewer({
       : {
           transform: `scale(${zoom / 100})${previewTransform ? ` ${previewTransform}` : ""}`,
           transformOrigin: "center center",
+          ...checkerBg,
           ...(previewTransform && { transition: "transform 0.25s ease, filter 0.15s ease" }),
           ...(cssFilter && { filter: cssFilter, transition: "filter 0.15s ease" }),
         };
@@ -174,12 +180,7 @@ export function ImageViewer({
       <div
         ref={containerRef}
         className="flex-1 flex items-center justify-center overflow-auto p-4"
-        style={{
-          background: bgPreview?.showCheckerboard
-            ? "repeating-conic-gradient(#d0d0d0 0% 25%, #f0f0f0 0% 50%) 0 0 / 20px 20px"
-            : undefined,
-          backgroundColor: !bgPreview?.showCheckerboard ? "hsl(var(--muted) / 0.2)" : undefined,
-        }}
+        style={{ backgroundColor: "hsl(var(--muted) / 0.2)" }}
       >
         {loadError ? (
           <div className="flex flex-col items-center justify-center gap-3 text-center">