fix lost header for t-image-viewer

src/components/CustomerProfileCard.vue

@@ -2,13 +2,13 @@
 	<div v-if="customer" class="customer-profile-card">
 		<div v-if="photoURL" class="avatar-trigger" @click="handlePhotoClick">
 			<t-image :src="photoURL" :alt="customerName" fit="cover" class="avatar" />
-			<div @click.stop>
+			<teleport to="body">
 				<t-image-viewer
 					v-model:visible="photoViewerVisible"
 					:images="photoViewerImages"
 					show-index
 				/>
-			</div>
+			</teleport>
 		</div>
 		<div v-else class="avatar fallback" v-text="avatarText" />
 		<div class="content">

src/components/PhotoField.vue

@@ -34,11 +34,13 @@
 				<t-icon name="close" size="1rem" />
 			</t-button>
 		</div>
-		<t-image-viewer
-			v-model:visible="photoViewerVisible"
-			:images="photoViewerImages"
-			show-index
-		/>
+		<teleport to="body">
+			<t-image-viewer
+				v-model:visible="photoViewerVisible"
+				:images="photoViewerImages"
+				show-index
+			/>
+		</teleport>
 	</div>
 </template>
 

src/components/mediaSelector/MediaSelectorItem.vue

@@ -16,7 +16,7 @@
 					playsinline
 					preload="metadata"
 				/>
-				<span class="video-play" aria-hidden="true">▶</span>
+				<t-icon class="play" name="play-circle-filled" size="2rem" />
 			</div>
 			<t-image
 				v-else
@@ -101,18 +101,10 @@ const emit = defineEmits<{
 				object-fit: cover;
 			}
 
-			.video-play {
+			.play {
 				inset: 50% auto auto 50%;
-				width: 2rem;
-				height: 2rem;
-				color: #fff;
+				opacity: .7;
 				position: absolute;
-				display: flex;
-				font-size: 1.125rem;
-				align-items: center;
-				justify-content: center;
-				background: rgba(15, 23, 42, .68);
-				border-radius: 50%;
 				transform: translate(-50%, -50%);
 			}
 		}

src/components/mediaSelector/MediaSelectorViewer.vue

@@ -1,4 +1,5 @@
 <template>
+<teleport to="body">
 	<t-image-viewer
 		v-model:visible="viewerVisible"
 		:images="images"
@@ -88,6 +89,7 @@
 			</div>
 		</template>
 	</t-image-viewer>
+</teleport>
 </template>
 
 <script setup lang="ts">