The image element used flex: 1 1 0 (basis 0) inside the inline-flex
preview wrapper, causing it to collapse to zero height whenever a
device frame or watermark overlay was present. Changed to flex: 0 1 auto
so the image uses its intrinsic height and can shrink if needed.
Added regression e2e tests verifying every preset keeps the image
visible, and that adding a watermark does not collapse the image
regardless of whether a frame is active.
Background images, device frames, custom shadows, and watermark text
were not rendering in the right-pane preview. The preview now updates
in real time for all settings: gradient/solid/image backgrounds, macOS/
Windows/Browser frame chrome, iPhone/MacBook/iPad frame indicators,
custom shadow parameters, and watermark text overlay.
Also fixes a React StrictMode effect-ordering race where the parent
tool-page reset cleared preview state set by the child Settings
component on initial mount.
SnapOtter