From 1150ae916b832093fd1a5cdd4d1ea2335e839386 Mon Sep 17 00:00:00 2001 From: jay Date: Tue, 23 Jun 2026 09:22:17 -0400 Subject: [PATCH] /art rotate: keep the whole frame on-screen (short-edge cap + modest fixed frame) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The rotated fullscreen clipped the top rail: the image's short edge plus rail/mat exceeded the phone's narrow width. Cap the short edge (max-height pre-rotation), use a modest fixed rail/mat in this view so the moulding always fits regardless of the thickness slider, and hide the (now-sideways) caption — the placard is on the page anyway. Co-Authored-By: Claude Opus 4.8 --- frontend/src/routes/art/+page.svelte | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/routes/art/+page.svelte b/frontend/src/routes/art/+page.svelte index 81a1229..b0bd6c1 100644 --- a/frontend/src/routes/art/+page.svelte +++ b/frontend/src/routes/art/+page.svelte @@ -430,8 +430,12 @@ vw the short edge — so it always fits. Desktop and portrait art never hit this. */ @media (max-width: 640px) and (orientation: portrait) { .lightbox.rotate .lb-stage { transform: rotate(90deg); transform-origin: center; } - .lightbox.rotate .lb-frame { max-width: 90vh; } - .lightbox.rotate .lb-frame img { max-width: 82vh; max-height: 80vw; } - .lightbox.rotate .lb-frame.frame--none img { max-width: 92vh; max-height: 92vw; } + .lightbox.rotate .lb-cap { display: none; } /* would sit sideways; the placard's on the page */ + /* The image's SHORT edge + the frame's rail/mat map to the phone's narrow width, so + cap it there (max-height, pre-rotation) with a modest fixed frame so the whole + moulding always fits; the long edge (max-width → screen height) stays generous. */ + .lightbox.rotate .lb-frame { max-width: 92vh; --rail: 16px; --mat: 16px; } + .lightbox.rotate .lb-frame img { max-width: 88vh; max-height: 74vw; } + .lightbox.rotate .lb-frame.frame--none img { max-width: 94vh; max-height: 92vw; } }