From 18c7ac84e152e79c3c22abceace017e47f23b66d Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 4 May 2025 14:15:17 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix(frontend):=20Instance=20Ticker=E3=81=AE?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E3=82=B9=E3=83=88=E3=83=AD=E3=83=BC=E3=82=AF?=
 =?UTF-8?q?=E3=82=92SVG=E6=8F=8F=E7=94=BB=E3=81=A7=E5=BE=A9=E6=B4=BB?=
 =?UTF-8?q?=E3=81=95=E3=81=9B=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkInstanceTicker.vue       | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index 380fb7b2d8..aa73c346d4 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -6,7 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root" :style="themeColorStyle">
 	<img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
-	<div :class="$style.name">{{ instanceName }}</div>
+	<div :class="$style.name">
+		<svg :class="$style.nameSvg" version="1.1" xmlns="http://www.w3.org/2000/svg">
+			<text x="0" y="0" :class="$style.nameSvgText">
+				<tspan x="0" y="0" :class="$style.nameSvgTspan">{{ instanceName }}</tspan>
+			</text>
+		</svg>
+	</div>
 </div>
 </template>
 
@@ -78,10 +84,34 @@ $height: 2ex;
 
 .name {
 	margin-left: 4px;
+	height: 100%;
 	line-height: 1;
 	font-size: 0.9em;
 	font-weight: bold;
 	white-space: nowrap;
 	overflow: visible;
 }
+
+.nameSvg {
+	width: auto;
+	height: 100%;
+	overflow: visible;
+}
+
+.nameSvgText {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	text-rendering: optimizeLegibility;
+	transform: translateY(calc(100% - 2.5px));
+}
+
+.nameSvgTspan {
+	fill: currentColor;
+	stroke: #000;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-width: 2.5px;
+	paint-order: stroke fill markers;
+}
 </style>

From 675becdea2faadcf99a888badd53861678e500c9 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 4 May 2025 14:19:14 +0900
Subject: [PATCH 2/2] refactor

---
 packages/frontend/src/components/MkInstanceTicker.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index aa73c346d4..fbb3308ea7 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -8,9 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
 	<div :class="$style.name">
 		<svg :class="$style.nameSvg" version="1.1" xmlns="http://www.w3.org/2000/svg">
-			<text x="0" y="0" :class="$style.nameSvgText">
-				<tspan x="0" y="0" :class="$style.nameSvgTspan">{{ instanceName }}</tspan>
-			</text>
+			<text x="0" y="0" :class="$style.nameSvgText">{{ instanceName }}</text>
 		</svg>
 	</div>
 </div>
@@ -103,10 +101,7 @@ $height: 2ex;
 	font-size: inherit;
 	font-weight: inherit;
 	text-rendering: optimizeLegibility;
-	transform: translateY(calc(100% - 2.5px));
-}
-
-.nameSvgTspan {
+	transform: translateY(calc(100% - 2.5px)); // 縁取りの上部分 2.5px
 	fill: currentColor;
 	stroke: #000;
 	stroke-linecap: round;