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
style={{
...imageWrapperStyle,
display: imageWrapperChildren ? "inline-flex" : "inline-block",
flexDirection: imageWrapperChildren ? ("column" as const) : undefined,
display: "inline-flex",
flexDirection: "column" as const,
position: imageWrapperChildren ? ("relative" as const) : undefined,
boxSizing: "border-box" as const,
overflow: "hidden",
@@ -281,22 +281,13 @@ export function ImageViewer({
onLoad={handleImageLoad}
onError={handleImageError}
className="select-none"
style={
imageWrapperChildren
? {
display: "block",
flex: "0 1 auto",
minHeight: 0,
maxWidth: "100%",
objectFit: "contain" as const,
}
: {
display: "block",
maxWidth: "100%",
maxHeight: "100%",
objectFit: "contain" as const,
}
}
style={{
display: "block",
flex: "0 1 auto",
minHeight: 0,
maxWidth: "100%",
objectFit: "contain" as const,
}}
draggable={false}
/>
</div>