fix: crop tool overflows viewport with tall portrait images

The crop area flex container lacked min-h-0, preventing it from shrinking
below its content's intrinsic height. For tall images, react-image-crop's
CSS (max-height: inherit at specificity 0-1-1) overrides the Tailwind
max-h constraint, and without min-h-0 the flex item refuses to shrink,
causing viewport overflow.

Closes #122
This commit is contained in:
SnapOtter
2026-05-05 17:51:01 +08:00
parent e358634f8b
commit 1807a43f2d
2 changed files with 31 additions and 1 deletions
@@ -98,7 +98,7 @@ export function CropCanvas({
return (
<div ref={containerRef} className="flex flex-col w-full h-full max-w-4xl mx-auto outline-none">
{/* Crop area */}
<div className="flex-1 flex items-center justify-center overflow-hidden bg-muted/20 p-4">
<div className="flex-1 flex items-center justify-center overflow-hidden bg-muted/20 p-4 min-h-0">
<ReactCrop
crop={crop}
onChange={(_pixelCrop, percentCrop) => onCropChange(percentCrop)}