fix(examples): improve mobile support for map, pdf, and threejs examples (#555)

* Fix touch gesture conflicts in WebGL example apps on mobile

* Format with prettier

* fix(examples): improve mobile support for map, pdf, and threejs examples

- map-server: fullscreen button respects safe area insets, hover/opacity
  pattern with always-visible on touch devices
- pdf-server: fit-to-width scale for narrow viewports, responsive toolbar
  with compact controls on mobile, safe area in fullscreen toolbar via
  CSS custom properties
- threejs-server: fullscreen button respects safe area and always visible
  on touch, ResizeObserver for responsive width, host containerDimensions
  for fullscreen height, no container padding in fullscreen, replace
  useHostStyles with inline style application to avoid overwriting
  onhostcontextchanged handler
This commit is contained in:
Mel Ludowise 2026-03-18 06:47:47 -07:00 • committed by GitHub
commit 83d82a1caa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -92,6 +92,16 @@ body {
opacity: 0.7;
}
/* Always show button on touch devices */
.threejs-container.touch-device .fullscreen-btn.available {
opacity: 0.7;
}
/* In fullscreen, canvas goes edge-to-edge; only the button respects safe area */
.threejs-container.fullscreen {
padding: 0 !important;
}
/* Fullscreen mode: swap icons and remove border radius */
.threejs-container.fullscreen .fullscreen-btn .expand-icon {
display: none;