fix(kimi-web): improve mobile safe-area handling (#1459)

wbxl2000 · web-flow · commit 6eb8e13417f2 · 2026-07-15T14:50:01.000+08:00
* fix(kimi-web): improve mobile safe-area handling

* fix(kimi-web): restore dock-height fallback where ChatDock is absent

* fix(kimi-web): pin the app shell to the visual viewport height

* fix(kimi-web): pin the app shell to the visual viewport

* chore: add changeset for mobile safe-area fixes
diff --git a/.changeset/mobile-safe-area.md b/.changeset/mobile-safe-area.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Fix mobile safe-area handling, including the composer floating above the on-screen keyboard on iOS, doubled landscape insets, the PWA top bar under the notch, and toasts overlapping the composer as it grows.
diff --git a/apps/kimi-web/index.html b/apps/kimi-web/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" sizes="64x64" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
     <meta name="color-scheme" content="light dark" />
     <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
     <meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)" />
diff --git a/apps/kimi-web/src/App.vue b/apps/kimi-web/src/App.vue
@@ -143,6 +143,28 @@ function openOnboarding(): void {
   showOnboarding.value = true;
 }
 
+// iOS Safari does not shrink `dvh` for the on-screen keyboard. Instead it pans
+// the visual viewport (offsetTop > 0) to reveal the focused field, which a
+// 100dvh in-flow shell cannot follow: the dock ends up behind the keyboard, or
+// the page shows a blank band past the shell's bottom edge. Pin the shell to
+// the VISUAL viewport instead: position:fixed + top/height mirrored from
+// visualViewport (height shrinks with the keyboard, offsetTop tracks the pan).
+// No-ops on desktop, where offsetTop is 0 and height equals innerHeight.
+let appHeightRaf = 0;
+function setAppHeight(): void {
+  const vv = window.visualViewport;
+  const root = document.documentElement.style;
+  root.setProperty('--app-height', `${vv?.height ?? window.innerHeight}px`);
+  root.setProperty('--app-top', `${vv?.offsetTop ?? 0}px`);
+}
+function syncAppHeight(): void {
+  if (appHeightRaf) return;
+  appHeightRaf = requestAnimationFrame(() => {
+    appHeightRaf = 0;
+    setAppHeight();
+  });
+}
+
 onMounted(() => {
   // Register the 401 listener before the first requests go out, so a token
   // rejection during the initial load() can never be missed.
@@ -154,13 +176,26 @@ onMounted(() => {
   });
   void client.load();
   loadSidebarCollapsed();
+  setAppHeight();
+  window.visualViewport?.addEventListener('resize', syncAppHeight);
+  window.visualViewport?.addEventListener('scroll', syncAppHeight);
+  window.addEventListener('resize', syncAppHeight);
   // Capture-phase so Escape closes the side detail layer BEFORE the
   // conversation pane's bubble-phase handler interrupts a running prompt.
   document.addEventListener('keydown', onGlobalKeydown, true);
 });
 
 onUnmounted(() => {
   document.removeEventListener('keydown', onGlobalKeydown, true);
+  window.visualViewport?.removeEventListener('resize', syncAppHeight);
+  window.visualViewport?.removeEventListener('scroll', syncAppHeight);
+  window.removeEventListener('resize', syncAppHeight);
+  if (appHeightRaf) {
+    cancelAnimationFrame(appHeightRaf);
+    appHeightRaf = 0;
+  }
+  document.documentElement.style.removeProperty('--app-height');
+  document.documentElement.style.removeProperty('--app-top');
   if (offAuthRequired !== null) {
     offAuthRequired();
     offAuthRequired = null;
@@ -1070,8 +1105,17 @@ function openPr(url: string): void {
 .gload-fade-leave-to { opacity: 0; }
 
 .app-shell {
+  /* Pinned to the visual viewport (see setAppHeight): --app-top tracks iOS's
+     keyboard pan and --app-height shrinks with the keyboard, so the shell
+     always covers exactly the visible area. Fixed positioning keeps it out of
+     the document flow that iOS pans. */
+  position: fixed;
+  top: var(--app-top, 0px);
+  left: 0;
+  right: 0;
   height: 100vh;
   height: 100dvh;
+  height: var(--app-height, 100dvh);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -1247,10 +1291,10 @@ function openPr(url: string): void {
   .auth-page {
     align-items: flex-start;
     padding:
-      max(48px, env(safe-area-inset-top))
-      max(20px, env(safe-area-inset-right))
-      max(24px, env(safe-area-inset-bottom))
-      max(20px, env(safe-area-inset-left));
+      max(48px, var(--safe-top))
+      max(20px, var(--safe-right))
+      max(24px, var(--safe-bottom))
+      max(20px, var(--safe-left));
   }
   .auth-page-copy h1 {
     font-size: 26px;
diff --git a/apps/kimi-web/src/components/WarningToasts.vue b/apps/kimi-web/src/components/WarningToasts.vue
@@ -295,7 +295,9 @@ onUnmounted(() => {
   .toasts {
     left: 12px;
     right: 12px;
-    bottom: calc(76px + env(safe-area-inset-bottom));
+    /* Sit just above the chat dock; --dock-h already includes the dock's own
+       safe-area padding, so no extra safe-bottom term is needed. */
+    bottom: calc(var(--dock-h, 76px) + 8px);
     width: auto;
     max-height: 50vh;
   }
diff --git a/apps/kimi-web/src/components/chat/ChatDock.vue b/apps/kimi-web/src/components/chat/ChatDock.vue
@@ -3,7 +3,7 @@
 <!-- pending question/approval cards, and the composer. Only rendered inside a -->
 <!-- chat-pane group so it never leaks into files/tasks/preview/btw panes. -->
 <script setup lang="ts">
-import { onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { ActivationBadges, ApprovalBlock, ConversationStatus, PermissionMode, QueuedPromptView, TaskItem, TodoView, UIQuestion } from '../../types';
 import type { AppGoal, AppModel, AppSkill, QuestionResponse, ThinkingLevel } from '../../api/types';
@@ -91,6 +91,7 @@ const composerRef = ref<{
 } | null>(null);
 const workPanelRef = ref<HTMLElement | null>(null);
 const workbarRef = ref<HTMLElement | null>(null);
+const dockRef = ref<HTMLElement | null>(null);
 
 function loadForEdit(value: string): boolean {
   // The nested Composer is only rendered in ChatDock's v-else — when a pending
@@ -128,17 +129,36 @@ watch(
   { immediate: true },
 );
 
+let dockResizeObserver: ResizeObserver | null = null;
+
+function publishDockHeight(): void {
+  // Border-box height of the dock, exposed so fixed overlays (e.g. toasts) can
+  // anchor just above the composer. offsetHeight includes the dock's own
+  // safe-area padding, so consumers don't need to add safe-bottom again.
+  const height = dockRef.value?.offsetHeight ?? 0;
+  document.documentElement.style.setProperty('--dock-h', `${height}px`);
+}
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'function' || !dockRef.value) return;
+  dockResizeObserver = new ResizeObserver(publishDockHeight);
+  dockResizeObserver.observe(dockRef.value);
+  publishDockHeight();
+});
+
 onUnmounted(() => {
   if (typeof document !== 'undefined') {
     document.removeEventListener('mousedown', onDocumentMouseDown, true);
   }
+  dockResizeObserver?.disconnect();
+  dockResizeObserver = null;
 });
 
 defineExpose({ loadForEdit, loadAttachmentsForEdit, focus });
 </script>
 
 <template>
-  <div class="chat-dock" :class="[mobile ? 'align-mobile' : 'align-center']" @click.stop>
+  <div ref="dockRef" class="chat-dock" :class="[mobile ? 'align-mobile' : 'align-center']" @click.stop>
     <Transition name="dock-panel">
       <div
         ref="workPanelRef"
@@ -363,12 +383,10 @@ defineExpose({ loadForEdit, loadAttachmentsForEdit, focus });
 
 @media (max-width: 640px) {
   .chat-dock {
-    --dock-inline-left: max(12px, env(safe-area-inset-left));
-    --dock-inline-right: max(12px, env(safe-area-inset-right));
-  }
-  .chat-dock.align-mobile {
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
+    /* Inline (landscape) safe-area lives here only; the inner composer /
+       workbar read --dock-inline-* so the inset is applied exactly once. */
+    --dock-inline-left: max(12px, var(--safe-left));
+    --dock-inline-right: max(12px, var(--safe-right));
   }
   .dock-work-panel {
     left: 10px;
diff --git a/apps/kimi-web/src/components/chat/ChatPane.vue b/apps/kimi-web/src/components/chat/ChatPane.vue
@@ -1133,7 +1133,7 @@ function isStreamingRenderBlock(turn: ChatTurn, block: { sourceIndex: number }):
   .chat {
     box-sizing: border-box;
     width: 100%;
-    padding: 14px max(12px, env(safe-area-inset-right)) 18px max(12px, env(safe-area-inset-left));
+    padding: 14px max(12px, var(--safe-right)) 18px max(12px, var(--safe-left));
   }
   .u-bub {
     max-width: min(88%, calc(100vw - 52px));
diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
@@ -2173,9 +2173,9 @@ function selectModel(modelId: string): void {
   .composer {
     padding:
       9px
-      var(--dock-inline-right, max(12px, env(safe-area-inset-right)))
-      max(24px, env(safe-area-inset-bottom))
-      var(--dock-inline-left, max(12px, env(safe-area-inset-left)));
+      var(--dock-inline-right, max(12px, var(--safe-right)))
+      max(24px, var(--safe-bottom))
+      var(--dock-inline-left, max(12px, var(--safe-left)));
   }
   .composer-card {
     --composer-send-size: 36px;
diff --git a/apps/kimi-web/src/components/chat/ConversationPane.vue b/apps/kimi-web/src/components/chat/ConversationPane.vue
@@ -1172,6 +1172,14 @@ function onKeyDown(event: KeyboardEvent): void {
   }
 }
 
+// When the on-screen keyboard opens, browsers without interactive-widget support
+// fire a visualViewport resize instead of shrinking the layout viewport. Re-follow
+// the tail so the latest turn stays visible above the keyboard. No-op while the
+// user has manually scrolled away (following === false).
+function onVisualViewportResize(): void {
+  if (following.value) scheduleFollow();
+}
+
 onMounted(() => {
   nextTick(() => {
     if (typeof MutationObserver === 'function') {
@@ -1203,6 +1211,7 @@ onMounted(() => {
       document.addEventListener('visibilitychange', onVisibilityChange);
       document.addEventListener('keydown', onKeyDown);
     }
+    window.visualViewport?.addEventListener('resize', onVisualViewportResize);
   });
 });
 
@@ -1222,6 +1231,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
@@ -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
@@ -585,11 +585,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
@@ -90,9 +90,11 @@ const statusText = computed<string>(() =>
   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
@@ -211,6 +211,25 @@ 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. Left
+     undeclared on purpose: consumers use a fallback (e.g. the assumed
+     single-line dock height) on pages where ChatDock is not mounted. */
+}
+
 /* -- icon primitive (design-system §02) -------------------------------------
    Applied to every design-system icon: the <Icon> component output
    (components/ui/Icon.vue) and the iconSvg() v-html strings (lib/icons.ts).

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@moonshot-ai/kimi-code": patch
 +---
++
 +web: Fix mobile safe-area handling, including the composer floating above the on-screen keyboard on iOS, doubled landscape insets, the PWA top bar under the notch, and toasts overlapping the composer as it grows.
Original file line number	Diff line number	Diff line change
`@@ -1133,7 +1133,7 @@ function isStreamingRenderBlock(turn: ChatTurn, block: { sourceIndex: number }):`
`1133`	`1133`	`.chat {`
`1134`	`1134`	`box-sizing: border-box;`
`1135`	`1135`	`width: 100%;`
`1136`		`- padding: 14px max(12px, env(safe-area-inset-right)) 18px max(12px, env(safe-area-inset-left));`
	`1136`	`+ padding: 14px max(12px, var(--safe-right)) 18px max(12px, var(--safe-left));`
`1137`	`1137`	`}`
`1138`	`1138`	`.u-bub {`
`1139`	`1139`	`max-width: min(88%, calc(100vw - 52px));`
Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,7 @@ onUnmounted(() => {`
`145`	`145`	`min-height: 0;`
`146`	`146`	`overflow-y: auto;`
`147`	`147`	`-webkit-overflow-scrolling: touch;`
`148`		`- padding-bottom: max(10px, env(safe-area-inset-bottom));`
	`148`	`+ padding-bottom: max(16px, var(--safe-bottom));`
`149`	`149`	`}`
`150`	`150`
`151`	`151`	`/* Slide-up + fade transition for the whole sheet (scrim fades, panel slides). */`