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.
This commit is contained in:
SnapOtter
2026-05-11 17:10:42 +08:00
parent aec1e91c5a
commit aa614cb53d
2 changed files with 31 additions and 9 deletions
@@ -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 ? (