merge queue: checking main (d0f85ed), #7188 and #7187 together

apps/app-frontend/src/components/ui/app-update-button/index.vue

@@ -3,7 +3,7 @@
 		v-if="showUpdatePill"
 		type="outlined"
 		native-type="button"
-		class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+		class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-inherit !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
 		:class="{
 			'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill,
 			'opacity-100 scale-100': finishedDownloading && animateReadyPill,

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="() => {}"
-			/>
-
-			<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>
+	<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>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	</Teleport>
 </template>
 
 <script setup>