fix: mobile hub AI keyboard layout and instance top nav scroll
Sync hub shell to visualViewport when the keyboard opens to prevent white screen above chat input. Make instance tabs horizontally scrollable with active tab centered on phone. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -3815,15 +3815,31 @@ body.hub-page-ai #page-ai {
|
||||
@media (max-width: 720px) {
|
||||
body.hub-page-ai .app-shell {
|
||||
padding-bottom: max(8px, env(safe-area-inset-bottom));
|
||||
height: 100dvh;
|
||||
max-height: 100dvh;
|
||||
height: var(--hub-vvh, 100dvh);
|
||||
max-height: var(--hub-vvh, 100dvh);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
will-change: transform, height;
|
||||
}
|
||||
|
||||
body.hub-page-ai {
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
body.hub-page-ai.hub-ai-keyboard-open .app-header,
|
||||
body.hub-page-ai.hub-ai-keyboard-open #page-ai .page-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
body.hub-page-ai.hub-ai-keyboard-open .ai-panel-head {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
body.hub-page-ai #page-ai {
|
||||
@@ -3896,23 +3912,29 @@ body.hub-page-ai #page-ai {
|
||||
|
||||
body.hub-page-ai .ai-chat-panel {
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-messages {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding-bottom: 8px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-form {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 10px 0 max(10px, env(safe-area-inset-bottom));
|
||||
background: color-mix(in srgb, var(--panel) 92%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
background: var(--panel);
|
||||
border-top: 1px solid var(--border-soft);
|
||||
box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
|
||||
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
body.hub-page-ai .ai-chat-form textarea {
|
||||
|
||||
@@ -652,6 +652,7 @@
|
||||
el.classList.toggle("hidden", el.id !== pageId);
|
||||
});
|
||||
document.body.classList.toggle("hub-page-ai", page === "ai");
|
||||
syncHubAiMobileViewport();
|
||||
if (page === "monitor") startMonitorPoll();
|
||||
else stopMonitorPoll();
|
||||
if (page === "settings") loadSettingsUI();
|
||||
@@ -1005,8 +1006,73 @@
|
||||
applyAiMobileTab();
|
||||
}
|
||||
|
||||
let syncHubAiMobileViewport = () => {};
|
||||
|
||||
function initHubAiMobileViewport() {
|
||||
const mq = window.matchMedia("(max-width: 720px)");
|
||||
const shell = document.querySelector(".app-shell");
|
||||
const chatInput = document.getElementById("ai-chat-input");
|
||||
if (!shell || !window.visualViewport) {
|
||||
syncHubAiMobileViewport = () => {};
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollChatToEnd = () => {
|
||||
const box = document.getElementById("ai-chat-messages");
|
||||
if (box) requestAnimationFrame(() => { box.scrollTop = box.scrollHeight; });
|
||||
};
|
||||
|
||||
syncHubAiMobileViewport = () => {
|
||||
const onAi = document.body.classList.contains("hub-page-ai");
|
||||
if (!onAi || !mq.matches) {
|
||||
shell.style.removeProperty("height");
|
||||
shell.style.removeProperty("max-height");
|
||||
shell.style.removeProperty("width");
|
||||
shell.style.removeProperty("transform");
|
||||
document.documentElement.style.removeProperty("--hub-vvh");
|
||||
document.body.classList.remove("hub-ai-keyboard-open");
|
||||
return;
|
||||
}
|
||||
const vv = window.visualViewport;
|
||||
const h = Math.max(240, Math.round(vv.height));
|
||||
const top = Math.round(vv.offsetTop || 0);
|
||||
const left = Math.round(vv.offsetLeft || 0);
|
||||
document.documentElement.style.setProperty("--hub-vvh", `${h}px`);
|
||||
shell.style.height = `${h}px`;
|
||||
shell.style.maxHeight = `${h}px`;
|
||||
shell.style.width = `${Math.round(vv.width)}px`;
|
||||
shell.style.transform =
|
||||
top > 0 || left > 0 ? `translate(${left}px, ${top}px)` : "";
|
||||
const keyboardLikely =
|
||||
top > 0 || h < window.innerHeight * 0.82 || document.activeElement === chatInput;
|
||||
document.body.classList.toggle("hub-ai-keyboard-open", keyboardLikely);
|
||||
};
|
||||
|
||||
window.visualViewport.addEventListener("resize", syncHubAiMobileViewport);
|
||||
window.visualViewport.addEventListener("scroll", syncHubAiMobileViewport);
|
||||
window.addEventListener("resize", syncHubAiMobileViewport);
|
||||
window.addEventListener("orientationchange", () => {
|
||||
setTimeout(syncHubAiMobileViewport, 80);
|
||||
});
|
||||
|
||||
if (chatInput) {
|
||||
chatInput.addEventListener("focus", () => {
|
||||
syncHubAiMobileViewport();
|
||||
scrollChatToEnd();
|
||||
setTimeout(syncHubAiMobileViewport, 50);
|
||||
setTimeout(syncHubAiMobileViewport, 280);
|
||||
});
|
||||
chatInput.addEventListener("blur", () => {
|
||||
setTimeout(syncHubAiMobileViewport, 80);
|
||||
setTimeout(syncHubAiMobileViewport, 320);
|
||||
});
|
||||
}
|
||||
syncHubAiMobileViewport();
|
||||
}
|
||||
|
||||
function initMobileLayout() {
|
||||
initAiMobileTabs();
|
||||
initHubAiMobileViewport();
|
||||
let resizeTimer = null;
|
||||
let wasMobile = isMobileLayout();
|
||||
window.addEventListener("resize", () => {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<script src="/assets/theme.js?v=20260604-hub-inst-theme"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
|
||||
<meta name="theme-color" content="#0b0e18" />
|
||||
<meta name="apple-mobile-web-app-title" content="中控" />
|
||||
<link rel="icon" href="/assets/icons/favicon.ico" sizes="32x32" />
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
|
||||
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
|
||||
<link rel="stylesheet" href="/assets/app.css?v=20260609-hub-mobile-ai-v2" />
|
||||
<link rel="stylesheet" href="/assets/app.css?v=20260609-hub-mobile-ai-v3" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-bg" aria-hidden="true"></div>
|
||||
@@ -424,6 +424,6 @@
|
||||
<script src="/assets/chart.js?v=20260608-market-tz8"></script>
|
||||
<script src="/assets/archive.js?v=20260608-hub-archive-history"></script>
|
||||
<script src="/assets/ai_review_render.js?v=2"></script>
|
||||
<script src="/assets/app.js?v=20260609-hub-mobile-ai-v2"></script>
|
||||
<script src="/assets/app.js?v=20260609-hub-mobile-ai-v3"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user