fix(lightbox): mobile toolbar clipping + iOS safe-area + viewport-fit (#336)

When feedback was enabled the lightbox bottom toolbar packed counter +
zoom + download + like + 5-star + comments into a single row that
overflowed the viewport on iPhone-class widths, putting the rating
stars under the screen edge and below the iOS home indicator.

Changes:
- Bottom toolbar now uses flex-wrap with reduced gap/padding on mobile,
  so all controls fit (375px viewport: max-right 363 < 375; 390px:
  max-right 378 < 390; 393px: max-right 393 < 393).
- pb computed as max(0.75rem, env(safe-area-inset-bottom)) so the row
  sits above the iOS home indicator on devices with a gesture bar.
- Close button top/right now use max(1rem, env(safe-area-inset-*)) so
  it doesn't disappear under the notch / dynamic island.
- "Swipe to navigate" hint moved from bottom-20 to bottom-40 so it
  clears the now-taller wrapped toolbar.
- index.html viewport meta gains viewport-fit=cover to enable
  env(safe-area-inset-*) on iOS Safari.

Verified in mobile emulation across iPhone SE (375x667), iPhone 13/14
(390x844), iPhone 14 Pro (393x852) portrait, and 14 Pro landscape
(852x393) — toolbar fits, photo centered, no clipping.

This commit is contained in:

Paul Nothaft

2026-04-28 16:50:44 +02:00

parent fcddfe094b

commit 42a7ae4be8

2 changed files with 23 additions and 12 deletions

									
										frontend/index.html
									
		+1
		-1
	
												View File
												
				@@ -3,7 +3,7 @@

				  <head>

				    <meta charset="UTF-8" />

				    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

				    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

				    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

				    <title>PicPeak - Photo Sharing Platform</title>

				  </head>

				  <body>