From bb56b3b4f11837f2d3e564184a9243a9a98490d6 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 4 Aug 2025 20:03:34 +0900
Subject: feat(frontend): ページのタブバーを下部に表示できるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkTabs.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

(limited to 'packages/frontend/src/components/MkTabs.vue')

diff --git a/packages/frontend/src/components/MkTabs.vue b/packages/frontend/src/components/MkTabs.vue
index 5c4a67b026..75cf84e918 100644
--- a/packages/frontend/src/components/MkTabs.vue
+++ b/packages/frontend/src/components/MkTabs.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.tabs">
+<div :class="[$style.tabs, { [$style.centered]: props.centered }]">
 	<div :class="$style.tabsInner">
 		<button
 			v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<div
 		ref="tabHighlightEl"
-		:class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation }]"
+		:class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation, [$style.tabHighlightUpper]: tabHighlightUpper }]"
 	></div>
 </div>
 </template>
@@ -59,6 +59,8 @@ import { prefer } from '@/preferences.js';
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
 	tab?: string;
+	centered?: boolean;
+	tabHighlightUpper?: boolean;
 }>(), {
 	tabs: () => ([] as Tab[]),
 });
@@ -169,6 +171,16 @@ onUnmounted(() => {
 	overflow-x: auto;
 	overflow-y: hidden;
 	scrollbar-width: none;
+
+	&.centered {
+		text-align: center;
+	}
+}
+
+@container (max-width: 450px) {
+	.tabs {
+		font-size: 80%;
+	}
 }
 
 .tabsInner {
@@ -227,5 +239,10 @@ onUnmounted(() => {
 	&.animate {
 		transition: width 0.15s ease, left 0.15s ease;
 	}
+
+	&.tabHighlightUpper {
+		top: 0;
+		bottom: auto;
+	}
 }
 </style>
-- 
cgit v1.2.3-freya