thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

/art rotate: keep the whole frame on-screen (short-edge cap + modest fixed frame)

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 09:22:17 -04:00
parent 06dd293da0
commit 1150ae916b
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/art/+page.svelte
+7 -3
View File
@@ -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; }
}
</style>