{
nextTick(() => {
if (typeof MutationObserver === 'function') {
@@ -974,6 +982,7 @@ onMounted(() => {
document.addEventListener('visibilitychange', onVisibilityChange);
document.addEventListener('keydown', onKeyDown);
}
+ window.visualViewport?.addEventListener('resize', onVisualViewportResize);
});
});
@@ -992,6 +1001,7 @@ onUnmounted(() => {
document.removeEventListener('visibilitychange', onVisibilityChange);
document.removeEventListener('keydown', onKeyDown);
}
+ window.visualViewport?.removeEventListener('resize', onVisualViewportResize);
});
function focusComposer(): void {
diff --git a/apps/kimi-web/src/components/dialogs/BottomSheet.vue b/apps/kimi-web/src/components/dialogs/BottomSheet.vue
index 9ed654d08a..4435ffd8c2 100644
--- a/apps/kimi-web/src/components/dialogs/BottomSheet.vue
+++ b/apps/kimi-web/src/components/dialogs/BottomSheet.vue
@@ -145,7 +145,7 @@ onUnmounted(() => {
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
- padding-bottom: max(10px, env(safe-area-inset-bottom));
+ padding-bottom: max(16px, var(--safe-bottom));
}
/* Slide-up + fade transition for the whole sheet (scrim fades, panel slides). */
diff --git a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
index 24034c703f..19837cd69a 100644
--- a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
+++ b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
@@ -593,11 +593,11 @@ watch(
align-items: flex-start;
gap: 10px;
min-width: 0;
- padding: 14px max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left));
+ padding: 14px max(14px, var(--safe-right)) 14px max(14px, var(--safe-left));
}
.group-title {
- padding-left: max(14px, env(safe-area-inset-left));
- padding-right: max(14px, env(safe-area-inset-right));
+ padding-left: max(14px, var(--safe-left));
+ padding-right: max(14px, var(--safe-right));
}
.srow-main {
flex: 1 1 auto;
diff --git a/apps/kimi-web/src/components/mobile/MobileTopBar.vue b/apps/kimi-web/src/components/mobile/MobileTopBar.vue
index 42303d0a90..df34d8fdef 100644
--- a/apps/kimi-web/src/components/mobile/MobileTopBar.vue
+++ b/apps/kimi-web/src/components/mobile/MobileTopBar.vue
@@ -90,9 +90,11 @@ const statusText = computed(() =>
display: flex;
align-items: center;
gap: 10px;
- height: 50px;
+ /* Grow the bar by the top inset so the 50px content row stays below the
+ status bar / notch in standalone PWA mode and landscape. */
+ height: calc(50px + var(--safe-top));
flex: none;
- padding: 0 12px;
+ padding: var(--safe-top) max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
border-bottom: 1px solid var(--color-line);
background: var(--color-bg);
font-family: var(--font-ui);
diff --git a/apps/kimi-web/src/style.css b/apps/kimi-web/src/style.css
index 40c71fd7e6..c5eee1b61a 100644
--- a/apps/kimi-web/src/style.css
+++ b/apps/kimi-web/src/style.css
@@ -213,6 +213,24 @@ summary {
color-scheme: light dark;
}
+/* Safe-area insets + chat-dock metrics ---------------------------------------
+ Centralised so mobile layout reads one consistent source instead of each
+ component calling env(safe-area-inset-*) with its own fallback. Falls back to
+ 0px where the UA doesn't expose insets (most desktops, older Android);
+ pair with max(min, var(--safe-bottom)) so gestures / home indicators keep a
+ minimum gutter even when the inset reports 0. The mobile footer (composer),
+ bottom sheets and the toast layer all consume these. */
+:root {
+ --safe-top: env(safe-area-inset-top, 0px);
+ --safe-right: env(safe-area-inset-right, 0px);
+ --safe-bottom: env(safe-area-inset-bottom, 0px);
+ --safe-left: env(safe-area-inset-left, 0px);
+ /* Border-box height of the chat dock, written by ChatDock via ResizeObserver.
+ Used to anchor fixed overlays (toasts, floating hints) just above the
+ composer — dynamic so multi-line input growth keeps them clear. */
+ --dock-h: 0px;
+}
+
/* -- icon primitive (design-system §02) -------------------------------------
Shared by the component and iconSvg() v-html strings (lib/icons.ts).
Icons are Remix Icon (fill="currentColor" on a 24x24 grid), so colour follows