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: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=8A=E3=83=93=E3=82=B2?=
 =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90=E3=83=BC=E3=82=92?=
 =?UTF-8?q?=E4=B8=8B=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=97=E3=81=A6=E3=81=84?=
 =?UTF-8?q?=E3=82=8B=E3=81=A8=E3=81=8D=E3=81=AB=E3=80=81=E9=A0=85=E7=9B=AE?=
 =?UTF-8?q?=E6=95=B0=E3=81=8C=E5=A4=9A=E3=81=84=E3=81=A8=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=81=8C=E5=B4=A9=E3=82=8C=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 .../frontend/src/ui/_common_/navbar-h.vue     | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e3beb4c31..f4d83f93cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 
 - Enhance: リアクションの受け入れ設定にキャプションを追加 #15921
 - Fix: ページの内容がはみ出ることがある問題を修正
+- Fix: ナビゲーションバーを下に表示しているときに、項目数が多いと表示が崩れる問題を修正
 - Fix: ヘッダーメニューのチャンネルの新規作成の項目でチャンネル作成ページに飛べない問題を修正 #16816
 - Fix: ラジオボタンに空白の選択肢が表示される問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/1105)
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>