From b8bf4f88ccb70bfd424990dec6e159a1cd1e855a Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Thu, 25 Jun 2026 10:33:01 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20S=E1=BB=ADa=20l=E1=BB=97i=20b=E1=BA=A3n?=
 =?UTF-8?q?=20=C4=91=E1=BB=93=20kh=C3=B4ng=20full=20m=C3=A0n=20h=C3=ACnh?=
 =?UTF-8?q?=20v=C3=A0=20kh=C3=B4ng=20zoom=20=C4=91=C6=B0=E1=BB=A3c=20tr?=
 =?UTF-8?q?=C3=AAn=20iOS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dùng viewportHeight từ JS thay vì CSS dvh để tránh vấn đề iOS Safari
- Thêm MapSizeHandler gọi invalidateSize() để Leaflet tính lại kích thước
- Bật scrollWheelZoom, touchZoom, doubleClickZoom, dragging, inertia
- Đặt maxZoom=20, minZoom=2 rõ ràng
- Loại bỏ max-width/overflow-x trong index.css để không ảnh hưởng trang khác
---
 frontend/src/pages/TourNavigationPage.tsx | 40 +++++++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/TourNavigationPage.tsx b/frontend/src/pages/TourNavigationPage.tsx
index 9cda0dd..91568ce 100644
--- a/frontend/src/pages/TourNavigationPage.tsx
+++ b/frontend/src/pages/TourNavigationPage.tsx
@@ -77,16 +77,42 @@ const MapRefSetter = ({ mapRef }: { mapRef: React.MutableRefObject<L.Map | null>
   return null;
 };
 
+const MapSizeHandler = () => {
+  const map = useMap();
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      map.invalidateSize();
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [map]);
+  return null;
+};
+
 export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId, routeData, onBack }) => {
   const [isCompassActive, setIsCompassActive] = useState(false);
   const [currentHeading, setCurrentHeading] = useState(0);
   const [routeGeometry, setRouteGeometry] = useState<[number, number][] | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [viewportHeight, setViewportHeight] = useState(() => {
+    return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+  });
 
   const mapRef = useRef<L.Map | null>(null);
   const watchIdRef = useRef<number | null>(null);
   const fetchLockRef = useRef(false);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setViewportHeight(Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
+    };
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('orientationchange', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('orientationchange', handleResize);
+    };
+  }, []);
+
   const originLat = routeData?.origin?.lat;
   const originLng = routeData?.origin?.lng;
   const destLat = routeData?.destination?.lat;
@@ -200,8 +226,8 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
     : [0, 0];
 
   return (
-    <div className="fixed inset-0 bg-slate-950 flex flex-col overflow-hidden select-none text-white antialiased">
-      <div className="w-full bg-[#1e293b]/95 backdrop-blur-md border-b border-slate-800 px-4 py-3.5 flex items-center gap-3 z-50">
+    <div className="fixed inset-0 bg-slate-950 flex flex-col overflow-hidden select-none text-white antialiased" style={{ height: '100dvh', height: '-webkit-fill-available' }}>
+      <div className="w-full bg-[#1e293b]/95 backdrop-blur-md border-b border-slate-800 px-4 py-3.5 flex items-center gap-3 z-50 shrink-0">
         <button
           onClick={onBack}
           className="text-slate-300 hover:text-white p-1 rounded-lg hover:bg-slate-800 transition-colors"
@@ -214,15 +240,23 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
         </h2>
       </div>
 
-      <div className="flex-1 relative h-[calc(100vh-56px)]">
+      <div className="flex-1 relative min-h-0" style={{ height: viewportHeight - 56 }}>
         <MapContainer
           center={center}
           zoom={14}
           className="absolute inset-0 h-full w-full"
           zoomControl={true}
           attributionControl={false}
+          scrollWheelZoom={true}
+          doubleClickZoom={true}
+          touchZoom={true}
+          dragging={true}
+          inertia={true}
+          maxZoom={20}
+          minZoom={2}
         >
           <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" />
+          <MapSizeHandler />
           <MapRefSetter mapRef={mapRef} />
           {routeData.origin && (
             <Marker position={[routeData.origin.lat, routeData.origin.lng]} icon={userIcon}>