TudorandClaude Fable 5
b2dc4d0779
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 9m37s
PR Checks / Backend Smoke (pull_request) Successful in 5s
PR Checks / Build Backend (no push) (pull_request) Successful in 10s
PR Checks / Build Frontend (no push) (pull_request) Successful in 45s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 1m4s
The results-view map's fullscreen button called requestFullscreen(), which iOS Safari doesn't implement (fullscreen is video-only there), so tapping it did nothing on iPhones — the same gap already fixed for the school hero map. When the Fullscreen API is missing or its promise rejects, fall back to a fixed-position overlay (.fsFallback, z-index 5000) driven by state, locking body scroll while open. Leaflet re-measures on window resize, so dispatch a resize when fullscreen toggles (the CSS overlay fires none) or the map would fill only part of the screen. Native fullscreen is unchanged. New e2e journey deletes Element.requestFullscreen on a mobile viewport, opens the results map fullscreen, and asserts the exit control appears then releases; it fails against current production, reproducing the bug. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
77 lines
1.4 KiB
CSS
77 lines
1.4 KiB
CSS
.mapWrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.mapWrapper.fullscreen {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
}
|
|
|
|
/* Fallback fullscreen (iOS Safari — no Element.requestFullscreen): the API
|
|
can't promote the element, so pin it over the page ourselves. Above the
|
|
comparison toast (3000) and the bottom nav; below modals (9999+). */
|
|
.mapWrapper.fsFallback {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 5000;
|
|
}
|
|
|
|
.fullscreenBtn {
|
|
position: absolute;
|
|
top: 0.625rem;
|
|
right: 0.625rem;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
background: white;
|
|
border: 2px solid rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
color: #333;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.fullscreenBtn:hover {
|
|
background: #f4f4f4;
|
|
color: #000;
|
|
}
|
|
|
|
.mapLoading {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius-md);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.spinner {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 3px solid rgba(224, 114, 86, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: var(--accent-coral, #e07256);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.mapLoading p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9375rem;
|
|
margin: 0;
|
|
}
|