fix: keep modal dialogs clear of the iOS status bar in standalone mode - #604
Merged
agegr merged 2 commits intoAug 26, 2026
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #603
问题
0.8.10 起(#547 全屏铺满后),iOS PWA(standalone)中打开设置弹窗(
.settings-dialog-backdrop)或 Provider 配置弹窗(.config-panel-root.is-modal),弹窗标题栏与系统状态栏/灵动岛重叠,页签无法点击。根因
两层,真机验证缺一不可:
inset: 0垂直居中且无env(safe-area-inset-*)避让;standalone 下dvh不含状态栏条而画布从屏幕顶开始,居中后头部落入状态栏区域。.settings-dialog-surface的height: 84vh中 standalone 的vh含状态栏条(偏大),会把头部重新顶回状态栏;且真机上env(safe-area-inset-top)可能返回 0(viewport-fit=cover已确认存在)。修复
app/settings.css新增 standalone 媒体查询块:padding-top: max(59px, env(safe-area-inset-top))、padding-bottom: max(24px, env(safe-area-inset-bottom))(env 可用时取更大值,不可用时硬兜底);max-height: 100%,限制在留白后的内容区内。测试
MobilePwaLayout.test.mjs断言(跟随 fix: fill the iOS standalone PWA viewport #547 建立的既有范式),node --test components/MobilePwaLayout.test.mjs5/5 通过;