fix(doctor): render location map reliably when accordion expands

The map iframe lived inside a collapsed (max-h-0, overflow-hidden)
accordion with loading=lazy, so it often never loaded after expanding.
Mount the iframe only when the location item is open so it loads fresh,
and raise the open clamp from max-h-screen to max-h-[800px] so the map
isn't clipped on shorter viewports.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
2026-06-15 15:21:07 +03:30
co-authored by Claude Opus 4.8
parent ff54daf1ae
commit 365892a0f1
@@ -38,7 +38,7 @@ function Item({ data }) {
<div
className={`
overflow-hidden transition-all duration-500
${isOpen ? "max-h-screen " : "max-h-0"}
${isOpen ? "max-h-[800px] " : "max-h-0"}
`}
>
<div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
@@ -68,7 +68,7 @@ function Item({ data }) {
)}
</div>
</div>
{data?.map?.latitude && data?.map?.longitude && (
{isOpen && data?.map?.latitude && data?.map?.longitude && (
<div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
<iframe
src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}