From 7d78a1fc5850f5d06557e0ead7b5745fce3f9543 Mon Sep 17 00:00:00 2001
From: aramesh-site deploy <deploy@aramesh-site.local>
Date: Fri, 9 Oct 2026 18:10:27 +0000
Subject: [PATCH] =?UTF-8?q?fix(map):=20=D9=87=D9=85=E2=80=8C=DA=AF=D8=A7?=
 =?UTF-8?q?=D9=85=E2=80=8C=D8=B3=D8=A7=D8=B2=DB=8C=20=D8=A8=D9=88=D9=85=20?=
 =?UTF-8?q?=D8=A8=D8=A7=20ResizeObserver=20=D9=88=20=DA=A9=D9=81=20=D8=A7?=
 =?UTF-8?q?=D8=B1=D8=AA=D9=81=D8=A7=D8=B9=20=D8=B8=D8=B1=D9=81=20=E2=80=94?=
 =?UTF-8?q?=20=D8=AF=D8=B1=20=D8=AD=D8=A7=D9=84=D8=AA=20=D9=85=D9=88=D8=A8?=
 =?UTF-8?q?=D8=A7=DB=8C=D9=84/DevTools=20=D9=BE=D8=B3=20=D8=A7=D8=B2=20?=
 =?UTF-8?q?=D8=AA=D8=BA=DB=8C=DB=8C=D8=B1=20viewport=20=D9=86=D9=82=D8=B4?=
 =?UTF-8?q?=D9=87=20=D9=86=D8=A7=D9=82=D8=B5=20=D9=88=20=D8=AE=D8=A7=D9=84?=
 =?UTF-8?q?=DB=8C=20=D9=85=DB=8C=E2=80=8C=D9=85=D8=A7=D9=86=D8=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/map/MapViewport.tsx |  4 ++--
 frontend/src/map/useMapLibre.ts  | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/src/map/MapViewport.tsx b/frontend/src/map/MapViewport.tsx
index ecb633b..c8524d9 100644
--- a/frontend/src/map/MapViewport.tsx
+++ b/frontend/src/map/MapViewport.tsx
@@ -66,7 +66,7 @@ export function MapViewport({
 
   const shellClass = isFullscreen
     ? 'fixed inset-0 z-[75] h-[100dvh] w-screen animate-[luxFadeIn_0.25s_ease-out] rounded-none border-0'
-    : `relative h-full w-full rounded-3xl border border-ivory/10 shadow-lift ${className}`
+    : `relative h-full min-h-[280px] w-full rounded-3xl border border-ivory/10 shadow-lift ${className}`
 
   return (
     <div
@@ -78,7 +78,7 @@ export function MapViewport({
           است تا هم بستر موقعیت‌یابی فرزندان مپ‌لیبر باشد و هم هشدار
           «container has a non-static position» و محاسبه‌ی اشتباه آفست اسکرول
           رخ ندهد — ترتیب بار شدن CSS هیچ‌وقت تعیین‌کننده نباشد */}
-      <div ref={containerRef} className="relative h-full w-full" />
+      <div ref={containerRef} className="relative h-full min-h-[280px] w-full" />
 
       {isFullscreen ? (
         <button
diff --git a/frontend/src/map/useMapLibre.ts b/frontend/src/map/useMapLibre.ts
index 556e8d9..d5bc9d1 100644
--- a/frontend/src/map/useMapLibre.ts
+++ b/frontend/src/map/useMapLibre.ts
@@ -50,6 +50,7 @@ export function useMapLibre({ center, zoom, scrollZoom = true, maxBounds, minZoo
 
     let disposed = false
     let instance: maplibregl.Map | null = null
+    const cleanups: Array<() => void> = []
     let readyFallback: number | undefined
     let dprQuery: MediaQueryList | null = null
     let handleDprChange: (() => void) | null = null
@@ -128,9 +129,26 @@ export function useMapLibre({ center, zoom, scrollZoom = true, maxBounds, minZoo
         instance.on('style.load', () => {
           if (disposed) return
           setStatus('ready')
+          // یک هم‌گام‌سازی پس از چیدمان نهایی (فونت/تصویر ممکن است ارتفاع را عوض کند)
           window.setTimeout(() => instance?.resize(), 150)
         })
 
+        /**
+         * هم‌گام‌سازی مداوم بوم با اندازهٔ واقعی ظرف.
+         *
+         * تایمرهای ثابت کافی نیستند: در حالت موبایل DevTools و روی گوشی واقعی،
+         * ظرف پس از ساخته‌شدن نقشه تغییر اندازه می‌دهد (اعمال viewport شبیه‌سازی‌شده،
+         * جمع/باز شدن نوار آدرس، چرخش صفحه). در آن حالت بوم با اندازهٔ قدیمی
+         * می‌ماند و نقشه ناقص/تاریخ‌شده دیده می‌شود. ResizeObserver دقیقاً همان
+         * لحظه خبر می‌دهد و resize روی همان فریم اعمال می‌شود.
+         */
+        const sizeObserver = new ResizeObserver(() => {
+          if (disposed || !instance) return
+          instance.resize()
+        })
+        sizeObserver.observe(container)
+        cleanups.push(() => sizeObserver.disconnect())
+
         /**
          * کنترل بزرگ‌نمایی همراه خود نقشه ساخته می‌شود و با map.remove() پایین
          * می‌آید — map.remove به‌تنهایی onRemove همه‌ی کنترل‌ها را صدا می‌زند،
@@ -203,6 +221,7 @@ export function useMapLibre({ center, zoom, scrollZoom = true, maxBounds, minZoo
       window.clearTimeout(timeoutId)
       if (readyFallback !== undefined) window.clearTimeout(readyFallback)
       if (dprQuery && handleDprChange) dprQuery.removeEventListener('change', handleDprChange)
+      cleanups.forEach((fn) => fn())
       controller.abort()
       instance?.remove()
     }