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:
@@ -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`}
|
||||
|
||||
Reference in New Issue
Block a user