diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | packages/frontend/src/style.scss | 6 | ||||
| -rw-r--r-- | packages/frontend/src/ui/universal.vue | 2 |
3 files changed, 7 insertions, 2 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 744846d999..1b654699d4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ ### Client - リストTLで、ユーザーが追加・削除されてもTLを初期化しないように +- Fix: モバイル表示のときページ下部がナビゲーションバーに隠れる問題を修正 ### Server - Fix: APIのオフセットが壊れていたせいで「もっと見る」でもっと見れない問題を修正 diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index bd74db7c85..85ad442ba4 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -6,11 +6,13 @@ --marginHalf: 10px; --margin: var(--marginFull); - --minBottomSpacing: 0px; + + // switch dynamically + --minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))); + --minBottomSpacing: var(--minBottomSpacingMobile); @media (max-width: 500px) { --margin: var(--marginHalf); - --minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))); } //--ad: rgb(255 169 0 / 10%); diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 9ae43c39d3..50866b23ed 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -207,9 +207,11 @@ watch($$(navFooter), () => { if (navFooter) { navFooterHeight = navFooter.offsetHeight; document.body.style.setProperty('--stickyBottom', `${navFooterHeight}px`); + document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)'); } else { navFooterHeight = 0; document.body.style.setProperty('--stickyBottom', '0px'); + document.body.style.setProperty('--minBottomSpacing', '0px'); } }, { immediate: true, |