From 8182425b33edde64aad6409356a79ceeecab1bbf Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 12 Sep 2025 20:05:15 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20FormLink=E3=82=92=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=81=A8=E3=81=97=E3=81=A6=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=E9=9A=9B=E3=81=AB=E3=82=A8=E3=83=A9=E3=83=BC?=
 =?UTF-8?q?=E3=81=8C=E5=87=BA=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/form/link.vue     | 61 ++++++++++++-------
 1 file changed, 39 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
index e60155f4af..7b56eb48b6 100644
--- a/packages/frontend/src/components/form/link.vue
+++ b/packages/frontend/src/components/form/link.vue
@@ -4,31 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.inline]: inline }]">
-	<a v-if="external" :class="$style.main" class="_button" :href="to" target="_blank">
+<component
+	:is="to ? 'div' : 'button'"
+	:class="[
+		$style.root,
+		{
+			[$style.inline]: inline,
+			'_button': !to,
+		},
+	]"
+>
+	<component
+		:is="to ? (external ? 'a' : 'MkA') : 'div'"
+		:class="[$style.main, { [$style.active]: active }]"
+		class="_button"
+		v-bind="to ? (external ? { href: to, target: '_blank' } : { to, behavior }) : {}"
+	>
 		<span :class="$style.icon"><slot name="icon"></slot></span>
-		<span :class="$style.text"><slot></slot></span>
+		<div :class="$style.headerText">
+			<div>
+				<MkCondensedLine :minScale="2 / 3"><slot></slot></MkCondensedLine>
+			</div>
+			<div v-if="$slots.caption" :class="$style.headerTextSub">
+				<MkCondensedLine :minScale="2 / 3"><slot name="caption"></slot></MkCondensedLine>
+			</div>
+		</div>
 		<span :class="$style.suffix">
 			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
-			<i class="ti ti-external-link"></i>
+			<i :class="to && external ? 'ti ti-external-link' : 'ti ti-chevron-right'"></i>
 		</span>
-	</a>
-	<MkA v-else :class="[$style.main, { [$style.active]: active }]" class="_button" :to="to" :behavior="behavior">
-		<span :class="$style.icon"><slot name="icon"></slot></span>
-		<span :class="$style.text"><slot></slot></span>
-		<span :class="$style.suffix">
-			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
-			<i class="ti ti-chevron-right"></i>
-		</span>
-	</MkA>
-</div>
+	</component>
+</component>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-
 const props = defineProps<{
-	to: string;
+	to?: string;
 	active?: boolean;
 	external?: boolean;
 	behavior?: null | 'window' | 'browser';
@@ -75,17 +86,23 @@ const props = defineProps<{
 	&:empty {
 		display: none;
 
-		& + .text {
+		& + .headerText {
 			padding-left: 4px;
 		}
 	}
 }
 
-.text {
-	flex-shrink: 1;
-	white-space: normal;
+.headerText {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-align: start;
+	overflow: hidden;
 	padding-right: 12px;
-	text-align: center;
+}
+
+.headerTextSub {
+	color: var(--fgTransparentWeak);
+	font-size: .85em;
 }
 
 .suffix {