From 159d4e00dce1e9769999336660a038e92477fcf7 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 11 Jul 2026 15:21:55 +0900
Subject: [PATCH] Update MkImageGallery.item.vue

---
 .../frontend/src/components/MkImageGallery.item.vue  | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkImageGallery.item.vue b/packages/frontend/src/components/MkImageGallery.item.vue
index a943a87cbf..4c03633b9f 100644
--- a/packages/frontend/src/components/MkImageGallery.item.vue
+++ b/packages/frontend/src/components/MkImageGallery.item.vue
@@ -68,7 +68,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div :class="[$style.header, { [$style.infoShowing]: infoShowing && !isZooming }]">
 		<div :class="$style.title" class="_acrylic">
-			<MkCondensedLine :minScale="0.5">{{ content.comment ?? content.filename }}</MkCondensedLine>
+			<button class="_button" :class="$style.titleButton"><i class="ti ti-x" @click="closeThis"></i></button>
+			<div style="flex: 1; min-width: 0;">
+				<MkCondensedLine :minScale="0.5">{{ content.comment ?? content.filename }}</MkCondensedLine>
+			</div>
+			<button class="_button" :class="$style.titleButton"><i class="ti ti-x" @click="closeThis"></i></button>
 		</div>
 	</div>
 
@@ -665,14 +669,18 @@ function onCLick() {
 }
 
 .title {
+	display: flex;
 	width: max-content;
 	max-width: calc(100% - 20px);
 	margin: auto;
-	padding: 6px 14px;
+	padding: 6px 0px;
 	box-sizing: border-box;
 	border-radius: 0 0 10px 10px;
 	font-size: 85%;
 }
+.titleButton {
+	width: 30px;
+}
 
 .mediaControl {
 	width: 100%;