From 04b1d70823e798b9adc0395e2752ce1e468792e0 Mon Sep 17 00:00:00 2001
From: "Calum H." <calum@modrinth.com>
Date: Tue, 18 Aug 2026 01:39:32 +0100
Subject: [PATCH] fix: gallery viewer issue in app (#7187)

---
 .../src/pages/project/Gallery.vue             | 120 +++++++++---------
 1 file changed, 61 insertions(+), 59 deletions(-)

diff --git a/apps/app-frontend/src/pages/project/Gallery.vue b/apps/app-frontend/src/pages/project/Gallery.vue
index 454d20cfb4..5d4446b3cd 100644
--- a/apps/app-frontend/src/pages/project/Gallery.vue
+++ b/apps/app-frontend/src/pages/project/Gallery.vue
@@ -14,70 +14,72 @@
 			</span>
 		</Card>
 	</div>
-	<div v-if="expandedGalleryItem" class="expanded-image-modal" @click="hideImage">
-		<div class="content">
-			<img
-				class="image"
-				:class="{ 'zoomed-in': zoomedIn }"
-				:src="
-					expandedGalleryItem.raw_url
-						? expandedGalleryItem.raw_url
-						: 'https://cdn.modrinth.com/placeholder-banner.svg'
-				"
-				:alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
-				@click.stop="() => {}"
-			/>
+	<Teleport to="#teleports">
+		<div v-if="expandedGalleryItem" class="expanded-image-modal" @click="hideImage">
+			<div class="content">
+				<img
+					class="image"
+					:class="{ 'zoomed-in': zoomedIn }"
+					:src="
+						expandedGalleryItem.raw_url
+							? expandedGalleryItem.raw_url
+							: 'https://cdn.modrinth.com/placeholder-banner.svg'
+					"
+					:alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
+					@click.stop="() => {}"
+				/>
 
-			<div class="floating" @click.stop="() => {}">
-				<div class="text">
-					<h2 v-if="expandedGalleryItem.title">
-						{{ expandedGalleryItem.title }}
-					</h2>
-					<p v-if="expandedGalleryItem.description">
-						{{ expandedGalleryItem.description }}
-					</p>
-				</div>
-				<div class="controls">
-					<div class="buttons">
-						<IconButton label="Close" class="close" @click="hideImage">
-							<XIcon aria-hidden="true" />
-						</IconButton>
-						<ButtonLink
-							class="open btn icon-only !w-9 !px-0 !rounded-full"
-							target="_blank"
-							:href="
-								expandedGalleryItem.raw_url
-									? expandedGalleryItem.raw_url
-									: 'https://cdn.modrinth.com/placeholder-banner.svg'
-							"
-						>
-							<ExternalIcon aria-hidden="true" />
-						</ButtonLink>
-						<IconButton label="Toggle zoom" @click="zoomedIn = !zoomedIn">
-							<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-							<ContractIcon v-else aria-hidden="true" />
-						</IconButton>
-						<IconButton
-							v-if="filteredGallery.length > 1"
-							label="Previous image"
-							class="previous"
-							@click="previousImage()"
-						>
-							<LeftArrowIcon aria-hidden="true" />
-						</IconButton>
-						<IconButton
-							v-if="filteredGallery.length > 1"
-							label="Next image"
-							class="next"
-							@click="nextImage()"
-						>
-							<RightArrowIcon aria-hidden="true" />
-						</IconButton>
+				<div class="floating" @click.stop="() => {}">
+					<div class="text">
+						<h2 v-if="expandedGalleryItem.title">
+							{{ expandedGalleryItem.title }}
+						</h2>
+						<p v-if="expandedGalleryItem.description">
+							{{ expandedGalleryItem.description }}
+						</p>
+					</div>
+					<div class="controls">
+						<div class="buttons">
+							<IconButton label="Close" class="close" @click="hideImage">
+								<XIcon aria-hidden="true" />
+							</IconButton>
+							<ButtonLink
+								class="open btn icon-only !w-9 !px-0 !rounded-full"
+								target="_blank"
+								:href="
+									expandedGalleryItem.raw_url
+										? expandedGalleryItem.raw_url
+										: 'https://cdn.modrinth.com/placeholder-banner.svg'
+								"
+							>
+								<ExternalIcon aria-hidden="true" />
+							</ButtonLink>
+							<IconButton label="Toggle zoom" @click="zoomedIn = !zoomedIn">
+								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
+								<ContractIcon v-else aria-hidden="true" />
+							</IconButton>
+							<IconButton
+								v-if="filteredGallery.length > 1"
+								label="Previous image"
+								class="previous"
+								@click="previousImage()"
+							>
+								<LeftArrowIcon aria-hidden="true" />
+							</IconButton>
+							<IconButton
+								v-if="filteredGallery.length > 1"
+								label="Next image"
+								class="next"
+								@click="nextImage()"
+							>
+								<RightArrowIcon aria-hidden="true" />
+							</IconButton>
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	</Teleport>
 </template>
 
 <script setup>