From aa614cb53d24f30c7d0127db055e05062ae2ed9b Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Mon, 11 May 2026 17:10:42 +0800
Subject: [PATCH] fix: constrain thumbnail strip to right pane and handle
 non-previewable formats

The thumbnail strip expanded beyond the right pane because the flex
section lacked min-w-0, causing a page-level horizontal scrollbar.
Added min-w-0 to both mobile and desktop image area sections.

For non-previewable formats (DDS, TIFF, EXR, PSD, RAW, etc.), show a
file info card with format and size instead of passing the blob URL to
an img tag that fails and shows an infinite "Loading preview..." spinner.
Also changed the ImageViewer error state from a misleading spinner to a
static "Preview not available" message.
---
 .../src/components/common/image-viewer.tsx    |  6 ++--
 apps/web/src/pages/tool-page.tsx              | 34 +++++++++++++++----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/common/image-viewer.tsx b/apps/web/src/components/common/image-viewer.tsx
index a01ed866..6a61d796 100644
--- a/apps/web/src/components/common/image-viewer.tsx
+++ b/apps/web/src/components/common/image-viewer.tsx
@@ -1,4 +1,4 @@
-import { Loader2, Maximize, Minimize2, ZoomIn, ZoomOut } from "lucide-react";
+import { FileImage, Maximize, Minimize2, ZoomIn, ZoomOut } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatFileSize } from "@/lib/download";
 
@@ -184,8 +184,8 @@ export function ImageViewer({
       >
         {loadError ? (
           <div className="flex flex-col items-center justify-center gap-3 text-center">
-            <Loader2 className="h-8 w-8 text-muted-foreground animate-spin" />
-            <p className="text-sm text-muted-foreground">Loading preview...</p>
+            <FileImage className="h-8 w-8 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">Preview not available</p>
             <p className="text-xs text-muted-foreground/60">{filename}</p>
           </div>
         ) : bgPreview?.backgroundSrc || bgPreview?.containerBackground ? (
diff --git a/apps/web/src/pages/tool-page.tsx b/apps/web/src/pages/tool-page.tsx
index 9cc3c4d5..6c1b7d3f 100644
--- a/apps/web/src/pages/tool-page.tsx
+++ b/apps/web/src/pages/tool-page.tsx
@@ -586,11 +586,33 @@ export function ToolPage() {
     }
 
     if (hasFile && originalBlobUrl) {
+      const fname = selectedFileName ?? files[0].name;
+      const fsize = selectedFileSize ?? files[0].size;
+      if (!canBrowserPreview(originalBlobUrl, fname)) {
+        const ext = fname.split(".").pop()?.toUpperCase() ?? "";
+        return (
+          <div className="flex flex-col items-center justify-center h-full gap-4 text-center p-8">
+            <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center">
+              <FileImage className="h-8 w-8 text-muted-foreground" />
+            </div>
+            <div>
+              <p className="text-sm font-medium truncate max-w-xs">{fname}</p>
+              <p className="text-xs text-muted-foreground mt-1">
+                {ext} · {formatFileSize(fsize)}
+              </p>
+            </div>
+            <p className="text-xs text-muted-foreground max-w-xs">
+              {ext} files cannot be previewed in the browser. The tool will still process this file
+              normally.
+            </p>
+          </div>
+        );
+      }
       return (
         <ImageViewer
           src={originalBlobUrl}
-          filename={selectedFileName ?? files[0].name}
-          fileSize={selectedFileSize ?? files[0].size}
+          filename={fname}
+          fileSize={fsize}
           {...(isLivePreview && previewTransform
             ? {
                 cssRotate: previewTransform.rotate,
@@ -722,11 +744,11 @@ export function ToolPage() {
           {/* Main area: image viewer */}
           <section
             aria-label="Image area"
-            className="flex-1 flex flex-col min-h-0"
+            className="flex-1 flex flex-col min-h-0 min-w-0"
             onKeyDown={hasMultiple ? handleImageKeyDown : undefined}
             tabIndex={hasMultiple ? 0 : undefined}
           >
-            <div className="flex-1 relative flex items-center justify-center p-4 min-h-0">
+            <div className="flex-1 relative flex items-center justify-center p-4 min-h-0 min-w-0">
               {renderNavArrows()}
               {renderImageArea()}
             </div>
@@ -762,11 +784,11 @@ export function ToolPage() {
         {/* Main area: image viewer */}
         <section
           aria-label="Image area"
-          className="flex-1 flex flex-col min-h-0"
+          className="flex-1 flex flex-col min-h-0 min-w-0"
           onKeyDown={hasMultiple ? handleImageKeyDown : undefined}
           tabIndex={hasMultiple ? 0 : undefined}
         >
-          <div className="flex-1 relative flex items-center justify-center p-6 min-h-0">
+          <div className="flex-1 relative flex items-center justify-center p-6 min-h-0 min-w-0">
             {renderNavArrows()}
             {renderImageArea()}
           </div>