From b5fa8767dadcf2beed24dcfa01249a56223aa0ec Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 20 Feb 2023 17:28:09 +0900
Subject: [PATCH] :art:

---
 .../components/global/MkPageHeader.tabs.vue   | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
index b181b6298..3beedf34b 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
@@ -1,23 +1,33 @@
 <template>
-	<div ref="el" :class="$style.tabs" @wheel="onTabWheel">
-		<div :class="$style.tabsInner">
-			<button v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
-				class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
-				@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)">
-				<div :class="$style.tabInner">
-					<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
-					<div v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)"
-						:class="$style.tabTitle">{{ t.title }}</div>
-					<Transition v-else mode="in-out" @enter="enter" @after-enter="afterEnter" @leave="leave"
-						@after-leave="afterLeave">
-						<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
-					</Transition>
+<div ref="el" :class="$style.tabs" @wheel="onTabWheel">
+	<div :class="$style.tabsInner">
+		<button
+			v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
+			class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
+			@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
+		>
+			<div :class="$style.tabInner">
+				<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
+				<div
+					v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)"
+					:class="$style.tabTitle"
+				>
+					{{ t.title }}
 				</div>
-			</button>
-		</div>
-		<div ref="tabHighlightEl"
-			:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"></div>
+				<Transition
+					v-else mode="in-out" @enter="enter" @after-enter="afterEnter" @leave="leave"
+					@after-leave="afterLeave"
+				>
+					<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
+				</Transition>
+			</div>
+		</button>
 	</div>
+	<div
+		ref="tabHighlightEl"
+		:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"
+	></div>
+</div>
 </template>
 
 <script lang="ts">
@@ -206,8 +216,8 @@ onUnmounted(() => {
 	align-items: center;
 }
 
-.tabIcon+.tabTitle {
-	padding-left: 8px;
+.tabIcon + .tabTitle {
+	padding-left: 4px;
 }
 
 .tabTitle {