mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user