From: Codebuddy <codebuddy@localhost>
Date: Tue, 11 Aug 2026 22:26:10 +0000 (+0800)
Subject: fix(frontend): lock page scroll on iOS and pin top-bar for iPad
X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=7ad4586b60357b2aa7433bc774d75fc71f90e0ab;p=codebuddy-web.git

fix(frontend): lock page scroll on iOS and pin top-bar for iPad

- Use body{position:fixed; inset:0; overflow:hidden} to reliably lock the
  page on iOS Safari (overflow:hidden on body is ignored by iOS).
- Remove ineffective position:sticky from .top-bar; with body fixed the
  top-bar is a flex-shrink:0 flex item pinned at the top naturally.
- Fixes two iPad issues: title bar scrolling away, and page not
  auto-scrolling to newest terminal output (xterm handles internal scroll).
---

diff --git a/frontend/index.html b/frontend/index.html
index d872fce..f402fbb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,11 +7,12 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
-html { font-size: 15px; } html, body { height: 100%; background: #1a1a2e; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+html { font-size: 15px; height: 100%; }
+body { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; overflow: hidden; background: #1a1a2e; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
 
 /* 登录页 */
 #login-page {
-  display: flex; justify-content: center; align-items: center; height: 100vh;
+  display: flex; justify-content: center; align-items: center; height: 100%;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
 }
 .login-card {
@@ -67,7 +68,7 @@ html { font-size: 15px; } html, body { height: 100%; background: #1a1a2e; color:
 .top-bar .model-select option { background: #1a1a2e; color: #e0e0e0; }
 
 /* 终端页布局 */
-#terminal-page { display: none; height: 100vh; flex-direction: column; }
+#terminal-page { display: none; height: 100%; flex-direction: column; }
 #terminal-container { flex: 1; overflow: hidden; padding: 4px; min-height: 0; }
 
 /* 通用按钮样式（粘贴 modal 复用） */
@@ -92,7 +93,7 @@ html { font-size: 15px; } html, body { height: 100%; background: #1a1a2e; color:
 .img-chip .remove:hover { opacity: 1; }
 
 /* 任务列表页 */
-#picker-page { display: none; flex-direction: column; height: 100vh; }
+#picker-page { display: none; flex-direction: column; height: 100%; }
 .picker-header {
   display: flex; justify-content: space-between; align-items: center;
   padding: 20px 28px; border-bottom: 1px solid rgba(255,255,255,0.08);
@@ -197,7 +198,7 @@ html { font-size: 15px; } html, body { height: 100%; background: #1a1a2e; color:
 </div>
 
 <!-- 终端页 -->
-<div id="terminal-page" style="display:none; height:100vh; flex-direction:column;">
+<div id="terminal-page" style="display:none; height:100%; flex-direction:column;">
   <div class="top-bar">
     <div class="left">
       <div id="status-dot" class="dot disconnected"></div>