From 23ee9d47ff64c84d41dce316879deef205065cdc Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Wed, 2 Sep 2026 09:53:06 +0700 Subject: [PATCH] fix(layout): put game chrome in flow and contain third-party z-index The how-to-play hint was a free-floating overlay centred on the whole game box, which put it over the guess map search field on desktop and over the Mapillary attribution -- required visible by their Terms of Use -- on phones. It now rides PanoramaViewer's topBarSlot as a flex sibling of that credit, so neither collision is representable. Replace the ad-hoc z-index values and the two forced 9999 rules with one ladder of tokens in globals.css. Leaflet and Photo Sphere Viewer ladders are contained by isolate on the panes that host them rather than out-bid, which lets the dialog scrim finally cover the action bar and the minimap. Also: pad the header and content box with the left/right safe-area insets that viewportFit cover requires, size the collapsed minimap against the viewport so a landscape phone shrinks it instead of pushing it into the panorama chrome, hide Leaflet's credit and zoom buttons on that thumbnail and lift the zoom control clear of the wrapped credit when it expands, move the desktop "Click to place your guess" badge off the tile credit, raise the hint dismiss target to 44px, and move the sticky-footer column off body so Radix portals are not flex items. --- src/app/components/DebugFooter.js | 13 ++-- src/app/components/FirstRoundHint.js | 35 ++++++----- src/app/components/GameClient.js | 18 +++--- src/app/components/GuessMapPanel.js | 91 +++++++++++++++++++++------- src/app/components/PanoramaViewer.js | 65 ++++++++++++-------- src/app/globals.css | 38 ++++++++++-- src/app/layout.js | 17 ++++-- src/app/page.js | 9 +-- src/components/ui/dialog.jsx | 4 +- src/components/ui/select.jsx | 2 +- 10 files changed, 202 insertions(+), 90 deletions(-) diff --git a/src/app/components/DebugFooter.js b/src/app/components/DebugFooter.js index 11f8033..31c1612 100644 --- a/src/app/components/DebugFooter.js +++ b/src/app/components/DebugFooter.js @@ -10,6 +10,11 @@ import { useEffect, useRef, useState } from 'react'; // it never overlaps the game's panorama, map, or action bar, and no layer // needs a z-index to win over it. Clicking the sha copies the FULL value // (the label shows the short form). +// +// Height is --footer-h (36px) rather than the 44px touch floor: this strip is +// a band taken out of the game's non-scrolling surface, where in landscape +// 44px is a sixth of the vertical budget. 36px clears the 24px WCAG 2.2 target +// minimum, and both targets stay wide. export default function DebugFooter() { const sha = process.env.NEXT_PUBLIC_COMMIT_SHA || 'unknown'; const [copied, setCopied] = useState(false); @@ -31,12 +36,12 @@ export default function DebugFooter() { }; return ( -