Remove iframe teleport

Iframe teleport caused error when navigating away from city page. Seems like teleport can be buggy when using SSR, so removed and used simpler solution.

Author: therealJonSnow

app.vue

@@ -19,7 +19,6 @@
         :on-global-page="convertToBoolean(useRuntimeConfig().public.IS_GLOBAL_SITE)"
         :background-color="onGlobalPage ? 'white' : 'gray'"
       />
-      <div id="overlay" class="z-[100]" />
       <!-- <PreviewModeControls /> -->
     </div>
   </transition>

components/block/Iframe.vue

@@ -8,15 +8,14 @@
     class="!pt-96"
   >
     <div class="iframe-wrapper  aspect-[3/3.5] w-full sm:aspect-video">
-      <Teleport :disabled="!fullscreen" to="#overlay">
-        <div
-          class="iframe-container relative size-full overflow-hidden bg-white shadow"
-          :class="{
-            'size-screen fixed left-0 top-0': fullscreen,
-            'relative rounded-6': !fullscreen
-          }"
-        >
-          <!-- <div v-if="!loaded" class="absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-6 border-2 border-gray/60 bg-white">
+      <div
+        class="iframe-container size-full overflow-hidden bg-white shadow"
+        :class="{
+          'size-screen fixed left-0 top-0 z-[200]': fullscreen,
+          'relative rounded-6': !fullscreen
+        }"
+      >
+        <!-- <div v-if="!loaded" class="absolute left-0 top-0 flex size-full flex-col items-center justify-center rounded-6 border-2 border-gray/60 bg-white">
             <h4 class="mb-4">
               Looks like something went wrong
             </h4>
@@ -30,55 +29,54 @@
               text="View Map"
             />
           </div> -->
-          <LoadingState v-if="!loaded" class="absolute-center scale-75" />
-          <iframe
-            v-if="data.iframe"
-            class="absolute left-0 top-0 z-50 size-full"
-            :class="{ 'rounded-6': !fullscreen }"
-            :src="data.iframe"
-            loading="lazy"
-            @load="triggerLoad"
-          />
-          <Transition name="fade" mode="out-in">
-            <div
-              v-if="mapOverlayVisible"
-              class="group absolute left-0 top-0 z-[60] flex size-full cursor-pointer flex-col items-center justify-center bg-blue/90 text-white transition-colors hover:bg-blue/80"
-              @click="mapOverlayVisible = false"
-            >
-              <div class="size-fit transition-transform group-hover:scale-105">
-                <h3 class="text-white">
-                  {{ $t('View locations in') }} <span class="capitalize">{{ useRoute().params.city }}</span>
-                </h3>
-                <TheLink variant="info" :text="$t('Open Map')" hide-arrow class="mx-auto mt-16" />
-              </div>
+        <LoadingState v-if="!loaded" class="absolute-center scale-75" />
+        <iframe
+          v-if="data.iframe"
+          class="absolute left-0 top-0 z-50 size-full"
+          :class="{ 'rounded-6': !fullscreen }"
+          :src="data.iframe"
+          loading="lazy"
+          @load="triggerLoad"
+        />
+        <Transition name="fade" mode="out-in">
+          <div
+            v-if="mapOverlayVisible"
+            class="group absolute left-0 top-0 z-[60] flex size-full cursor-pointer flex-col items-center justify-center bg-blue/90 text-white transition-colors hover:bg-blue/80"
+            @click="mapOverlayVisible = false"
+          >
+            <div class="size-fit transition-transform group-hover:scale-105">
+              <h3 class="text-white">
+                {{ $t('View locations in') }} <span class="capitalize">{{ useRoute().params.city }}</span>
+              </h3>
+              <TheLink variant="info" :text="$t('Open Map')" hide-arrow class="mx-auto mt-16" />
             </div>
-          </Transition>
-          <transition name="fade" mode="out-in">
-            <button
-              v-if="loaded"
-              class="iframe-button grid-row-2 right-24 z-50 grid size-32 cursor-pointer grid-cols-2 rounded-full border-1 border-gray bg-white p-4 shadow-banner"
+          </div>
+        </Transition>
+        <transition name="fade" mode="out-in">
+          <button
+            v-if="loaded"
+            class="iframe-button grid-row-2 right-24 z-50 grid size-32 cursor-pointer grid-cols-2 rounded-full border-1 border-gray bg-white p-4 shadow-banner"
+            :class="{
+              'absolute top-24': !fullscreen,
+              'fixed !top-104 z-[999] md:!top-24': fullscreen
+            }"
+            @click="fullscreen = !fullscreen"
+          >
+            <ArrowExternal
+              class="col-start-2 m-1 w-6 self-end "
               :class="{
-                'absolute top-24': !fullscreen,
-                'fixed !top-104 z-[999] md:!top-24': fullscreen
+                'rotate-180': fullscreen
               }"
-              @click="fullscreen = !fullscreen"
-            >
-              <ArrowExternal
-                class="col-start-2 m-1 w-6 self-end "
-                :class="{
-                  'rotate-180': fullscreen
-                }"
-              />
-              <ArrowExternal
-                class=" m-1 w-6 self-start justify-self-end"
-                :class="{
-                  'rotate-180': !fullscreen
-                }"
-              />
-            </button>
-          </transition>
-        </div>
-      </Teleport>
+            />
+            <ArrowExternal
+              class=" m-1 w-6 self-start justify-self-end"
+              :class="{
+                'rotate-180': !fullscreen
+              }"
+            />
+          </button>
+        </transition>
+      </div>
     </div>
   </BlockWrapper>
 </template>