From c3ad46ad6fcbe993c3b0e582e5f00384b540f5cc Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 25 Nov 2025 09:46:07 +0900
Subject: fix(frontend):
 ナビゲーションバーを下に表示しているときに、項目数が多いと表示が崩れる問題を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/ui/_common_/navbar-h.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

(limited to 'packages/frontend/src/ui')

diff --git a/packages/frontend/src/ui/_common_/navbar-h.vue b/packages/frontend/src/ui/_common_/navbar-h.vue
index b025dd4858..aa86ae0d36 100644
--- a/packages/frontend/src/ui/_common_/navbar-h.vue
+++ b/packages/frontend/src/ui/_common_/navbar-h.vue
@@ -119,6 +119,9 @@ onMounted(() => {
 		max-width: 1380px;
 		margin: 0 auto;
 		display: flex;
+		overflow: auto;
+		overflow-y: clip;
+		white-space: nowrap;
 
 		> .right,
 		> .left {
@@ -169,13 +172,19 @@ onMounted(() => {
 				margin: 0 10px;
 				border-right: solid 0.5px var(--MI_THEME-divider);
 			}
+		}
 
+		> .left {
 			> .instance {
 				display: inline-block;
 				position: relative;
 				width: 56px;
 				height: 100%;
 				vertical-align: bottom;
+				position: sticky;
+				top: 0;
+				left: 0;
+				z-index: 1;
 
 				> img {
 					display: inline-block;
@@ -188,9 +197,17 @@ onMounted(() => {
 					margin: auto;
 				}
 			}
+		}
+
+		> .right {
+			margin-left: auto;
+			position: sticky;
+			top: 0;
+			right: 0;
 
 			> .post {
 				display: inline-block;
+				margin-right: 8px;
 
 				> .button {
 					width: 40px;
@@ -211,10 +228,6 @@ onMounted(() => {
 				}
 			}
 		}
-
-		> .right {
-			margin-left: auto;
-		}
 	}
 }
 </style>
-- 
cgit v1.2.3-freya