Fit mode selection and zoom controls in lightbox

[Darkkal]

Parent Issue

Part of #74 — More controls for media in lightbox

Problem

No zoom capability exists for images. Users cannot inspect image details or choose how media is fitted within the lightbox.

Two Independent Concepts

This feature introduces two mutually exclusive display modes:

Fit Mode — How media is sized to the container (no manual zoom)

Mode	Behavior
Fit Both (default, current)	Media fits entirely within the container (object-fit: contain)
Fit Width	Media fills container width; may overflow vertically (pannable)
Fit Height	Media fills container height; may overflow horizontally (pannable)

Zoom Mode — Raw scale percentage, independent of fitting

• When the user activates zoom (via double-click, +/− buttons, or scroll wheel), the fit mode disengages
• Zoom is a percentage scale (e.g., 50%, 100%, 200%) within configurable min/max bounds
• When zoomed, the image is pannable via click-and-drag
• A "reset to fit" action returns to the active fit mode

Key rule: Fit and zoom are mutually exclusive. If fitting, the zoom level is not used. If zooming, the fitting behavior is not used.

Interaction Model

Action	Behavior
Double-click image	Toggle between fit mode and zoom mode. Entering zoom defaults to 100% native resolution (actual pixels). Exiting zoom returns to the current fit mode.
+ / − buttons	Adjust zoom level by a step increment within min/max bounds. If currently in fit mode, first press switches to zoom mode.
Scroll wheel (over image)	Same as + / − — adjusts zoom level, entering zoom mode if needed. Scroll-up = zoom in.
Fit mode cycle button	Icon button that cycles through Fit Both → Fit Width → Fit Height. Selecting a fit mode exits zoom mode.
Reset button	Returns to the current fit mode from zoom mode
Navigate to next/prev	Resets to fit mode; zoom state does not carry between items

Zoom Anchoring

• When zooming via double-click: zoom anchors to the click point
• When zooming via +/− or scroll wheel: zoom anchors to the cursor position (or center if via keyboard/button)
• Scroll-up = zoom in, scroll-down = zoom out (standard image viewer convention)

Zoom Level Indicator

• A small numeric overlay (e.g., "150%") appears near the media when the zoom level changes
• The overlay fades out after a brief delay (~1.5s)
• Only shown when in zoom mode, not during fit mode

Acceptance Criteria

• Fit mode cycle button (icon) rotates through Fit Both → Fit Width → Fit Height
• Double-clicking an image toggles between fit mode and zoom mode (100% native)
• Videos are excluded from double-click zoom (preserves native fullscreen behavior)
• Scroll-up zooms in, scroll-down zooms out
• Zoom percentage overlay appears transiently on zoom level change (~1.5s fade)
• + / − buttons and scroll wheel adjust zoom within configurable min/max
• Zoomed media is pannable via mouse drag
• When panning, swipe-to-navigate is disabled to avoid gesture conflicts
• Zoom anchors to the interaction point (click position or cursor position)
• Zoom/pan state and fit mode reset on navigation (selectedIndex or mediaIndex change)
• Single-click on a zoomed image does NOT trigger sidebar toggle
• Pan area is bounded — media cannot be dragged completely off-screen
• CSS transform: scale() translate() used with smooth transitions
• Fit mode and zoom min/max are configurable in /settings

Note: Pinch-to-zoom is handled separately in the pinch-to-zoom sub-issue, building on the zoom infrastructure established here.

[Darkkal]

implemented and validated in #132