Resize & Rotate/Flip UX Redesign

Problem

The before/after comparison slider is a poor fit for resize and rotate/flip tools:

Resize overlays two different-sized images — doesn't communicate anything useful. Users care about "how big will it be?" not pixel-level comparison.
Rotate/Flip transformations are self-evident. A slider adds nothing.

The resize settings also use technical jargon (contain, cover, fill, inside, outside) that confuses layman users.

Replace the current mode toggle (Pixels/Percentage) with three tabs:

Grid of cards grouped by platform (Instagram, Twitter/X, Facebook, YouTube, LinkedIn)
Each card shows: platform icon, preset name (e.g., "Post", "Story", "Header"), dimensions (e.g., "1080 × 1080")
Clicking a card selects it (highlighted border), clicking again deselects
Selected preset populates the dimensions automatically
Process button at bottom

Width and Height number inputs
Aspect ratio lock toggle between them (link/unlink icon)
Fit mode as 3 plain-language options:
- "Crop to fit" (maps to sharp cover)
- "Fit inside" (maps to sharp contain)
- "Stretch" (maps to sharp fill)
Remove "inside" and "outside" fit modes — they confuse laymen
"Don't enlarge" checkbox
Process button at bottom

Replace the before/after slider with side-by-side thumbnails:

Two image thumbnails side by side, each fitted within its half
Left: "Original" label, the original image, dimensions below (e.g., "3000 × 2000"), file size (e.g., "2.4 MB")
Right: "Resized" label, the processed image, new dimensions below (e.g., "1080 × 720"), file size (e.g., "340 KB")
File size savings shown between/below (e.g., "86% smaller")
Checkerboard background for transparency (same pattern as current viewer)
Review panel (undo, download, continue editing) remains unchanged

Replace the "process then compare" flow with live preview:

When a file is loaded, it shows in the image viewer as normal
As the user adjusts controls (rotate buttons, angle slider, flip toggles), CSS transforms update the preview in real-time — no server call
Controls stay the same: quick rotate 90 left/right, angle slider 0-360, horizontal/vertical flip toggles
The "Process" button label changes to "Apply" to signal finality
Clicking "Apply" sends to the server, produces the final file

After applying:

Result shows in the standard ImageViewer (no before/after slider, no side-by-side)
The transformation is self-evident
Review panel appears with undo/download options

apps/web/src/components/tools/resize-settings.tsx — rewrite with tab-based UI
apps/web/src/components/tools/rotate-settings.tsx — add live CSS preview controls
apps/web/src/pages/tool-page.tsx — conditionally render side-by-side for resize, skip before/after slider for rotate/flip
New component: apps/web/src/components/common/side-by-side-comparison.tsx — reusable side-by-side thumbnail comparison