From 828bc89890e73955257df3cef30ad00aeb436d1e Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Thu, 25 Jun 2026 11:03:45 +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=20mobile=20ch=E1=BB=89=20hi=E1=BB=83n=20th?=
 =?UTF-8?q?=E1=BB=8B=20k=C3=ADch=20th=C6=B0=E1=BB=9Bc=20m=E1=BA=B7c=20?=
 =?UTF-8?q?=C4=91=E1=BB=8Bnh=20v=C3=A0=20kh=C3=B4ng=20zoom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Xóa state viewportHeight phụ thuộc documentElement.clientHeight (không ổn định trên mobile)
- Xóa style dvh/-webkit-fill-available gây lỗi trên iOS Safari
- Đổi layout sang flex-1 thuần túy, không tính chiều cao bằng JS
- Xóa CSS transform khi rotation = 0 để tránh lỗi render trên mobile
- Tăng delay invalidateSize lên 100ms để Leaflet đo đúng kích thước container sau layout
---
 frontend/src/pages/TourNavigationPage.tsx | 32 ++++-------------------
 1 file changed, 5 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/TourNavigationPage.tsx b/frontend/src/pages/TourNavigationPage.tsx
index 91568ce..b0de235 100644
--- a/frontend/src/pages/TourNavigationPage.tsx
+++ b/frontend/src/pages/TourNavigationPage.tsx
@@ -39,7 +39,7 @@ const MapRotationHandler = ({ rotation }: { rotation: number }) => {
     if (rotation === 0) {
       cumulativeRotationRef.current = 0;
       prevRotationRef.current = 0;
-      container.style.transform = 'rotate(0deg) scale(1)';
+      container.style.transform = '';
       return;
     }
 
@@ -69,20 +69,12 @@ const CompassInteractionDetector = ({
   return null;
 };
 
-const MapRefSetter = ({ mapRef }: { mapRef: React.MutableRefObject<L.Map | null> }) => {
-  const map = useMap();
-  useEffect(() => {
-    mapRef.current = map;
-  }, [map, mapRef]);
-  return null;
-};
-
 const MapSizeHandler = () => {
   const map = useMap();
   useEffect(() => {
     const timer = setTimeout(() => {
       map.invalidateSize();
-    }, 0);
+    }, 100);
     return () => clearTimeout(timer);
   }, [map]);
   return null;
@@ -93,26 +85,12 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
   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 [mapReady, setMapReady] = useState(false);
 
   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;
@@ -226,7 +204,7 @@ 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" style={{ height: '100dvh', height: '-webkit-fill-available' }}>
+    <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 shrink-0">
         <button
           onClick={onBack}
@@ -240,7 +218,7 @@ export const TourNavigationPage: React.FC<TourNavigationPageProps> = ({ tourId,
         </h2>
       </div>
 
-      <div className="flex-1 relative min-h-0" style={{ height: viewportHeight - 56 }}>
+      <div className="flex-1 relative min-h-0">
         <MapContainer
           center={center}
           zoom={14}