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

1 files changed, 17 insertions, 4 deletions

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>