fix: prevent tall images from being cropped in live-preview wrapper

The wrapper used inline-block for tools without overlay children (e.g.
border). CSS maxHeight: 100% on the img inside an inline-block parent
without explicit height does not resolve, so tall images rendered at
natural height and got clipped by overflow: hidden. Unify both code
paths to always use inline-flex + column, where the flex item properly
shrinks within the container's maxHeight constraint.
This commit is contained in:
SnapOtter
2026-05-13 11:45:49 +08:00
parent 882ca2caf4
commit f46219c730
@@ -263,8 +263,8 @@ export function ImageViewer({
<div <div
style={{ style={{
...imageWrapperStyle, ...imageWrapperStyle,
display: imageWrapperChildren ? "inline-flex" : "inline-block", display: "inline-flex",
flexDirection: imageWrapperChildren ? ("column" as const) : undefined, flexDirection: "column" as const,
position: imageWrapperChildren ? ("relative" as const) : undefined, position: imageWrapperChildren ? ("relative" as const) : undefined,
boxSizing: "border-box" as const, boxSizing: "border-box" as const,
overflow: "hidden", overflow: "hidden",
@@ -281,22 +281,13 @@ export function ImageViewer({
onLoad={handleImageLoad} onLoad={handleImageLoad}
onError={handleImageError} onError={handleImageError}
className="select-none" className="select-none"
style={ style={{
imageWrapperChildren display: "block",
? { flex: "0 1 auto",
display: "block", minHeight: 0,
flex: "0 1 auto", maxWidth: "100%",
minHeight: 0, objectFit: "contain" as const,
maxWidth: "100%", }}
objectFit: "contain" as const,
}
: {
display: "block",
maxWidth: "100%",
maxHeight: "100%",
objectFit: "contain" as const,
}
}
draggable={false} draggable={false}
/> />
</div> </div>