fix(frontend): ナビゲーションバーを下に表示しているときに、項目数が多いと表示が崩れる問題を修正

Author: syuilo

CHANGELOG.md

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

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>