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; - } } }