From f04a91efe6e2fb66855440fd17178e9230b4a7b0 Mon Sep 17 00:00:00 2001 From: dekun Date: Mon, 27 Jul 2026 07:20:08 +0800 Subject: [PATCH] Fix instance phone layout: tabbar padding, form stack, options table scroll. --- lib/common/static/instance_theme.css | 149 ++++++++++++++++++++++-- lib/instance/templates/embed_shell.html | 2 +- 2 files changed, 140 insertions(+), 11 deletions(-) diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css index f510791..07f2d9d 100644 --- a/lib/common/static/instance_theme.css +++ b/lib/common/static/instance_theme.css @@ -5536,6 +5536,14 @@ html[data-theme="light"] .options-review-wrap .or-reviewed-table tbody tr:hover @media (max-width: 720px) { :root { --inst-m-tabbar-h: 56px; + --inst-m-page-pad: calc(var(--inst-m-tabbar-h) + max(16px, env(safe-area-inset-bottom)) + 12px); + } + + /* 仅手机壳:不碰 >720 桌面/平板 */ + body.inst-phone { + overflow-x: hidden !important; + padding-bottom: var(--inst-m-page-pad) !important; + box-sizing: border-box; } body.inst-phone .embed-top-nav.top-nav { @@ -5547,13 +5555,37 @@ html[data-theme="light"] .options-review-wrap .or-reviewed-table tbody tr:hover } body.inst-phone .header h1 { - font-size: 0.85rem !important; - line-height: 1.3; - margin: 0; + display: none !important; } body.inst-phone .container { - padding-bottom: calc(var(--inst-m-tabbar-h) + max(10px, env(safe-area-inset-bottom))) !important; + padding-bottom: 8px !important; + max-width: 100% !important; + min-width: 0 !important; + overflow-x: hidden !important; + } + + body.inst-phone #embed-page-root, + body.inst-phone .embed-tab-pane, + body.inst-phone .embed-tab-pane.is-active-pane { + max-width: 100%; + min-width: 0; + overflow-x: hidden; + } + + body.inst-phone .card { + max-width: 100%; + min-width: 0; + box-sizing: border-box; + } + + body.inst-phone .list-window-hint, + body.inst-phone .list-window-label { + display: none !important; + } + + body.inst-phone .instance-header-toolbar-filter { + gap: 6px; } body.inst-phone .instance-phone-only { @@ -5561,12 +5593,13 @@ html[data-theme="light"] .options-review-wrap .or-reviewed-table tbody tr:hover } body.inst-phone .instance-header-phone-strip { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); + width: 100%; } html[data-theme="light"] body.inst-phone .instance-header-phone-strip { @@ -5574,11 +5607,13 @@ html[data-theme="light"] .options-review-wrap .or-reviewed-table tbody tr:hover } body.inst-phone .inst-phone-chip { - display: inline-flex; + display: flex; align-items: baseline; - gap: 4px; - min-height: 28px; - padding: 4px 8px; + justify-content: space-between; + gap: 6px; + min-height: 32px; + min-width: 0; + padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); @@ -5595,16 +5630,110 @@ html[data-theme="light"] .options-review-wrap .or-reviewed-table tbody tr:hover font-style: normal; color: var(--inst-muted); font-size: 11px; + flex: 0 0 auto; } body.inst-phone .inst-phone-chip b { font-weight: 600; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: right; } body.inst-phone .inst-phone-chip--pnl b { color: var(--inst-nav-idle); } + /* 实盘/关键位等表单:窄屏拉满,避免挤成一行裁切 */ + body.inst-phone #add-order-form.form-row, + body.inst-phone form.form-row { + align-items: stretch; + } + + body.inst-phone #add-order-form.form-row > input:not([type="checkbox"]):not([type="radio"]), + body.inst-phone #add-order-form.form-row > select, + body.inst-phone #add-order-form #sltp-mode, + body.inst-phone form.form-row > input:not([type="checkbox"]):not([type="radio"]), + body.inst-phone form.form-row > select { + flex: 1 1 100% !important; + width: 100% !important; + max-width: 100% !important; + min-width: 0 !important; + box-sizing: border-box; + } + + body.inst-phone #add-order-form .order-entry-model-row, + body.inst-phone #add-order-form .order-time-close-wrap, + body.inst-phone #add-order-form > label, + body.inst-phone #add-order-form > button { + flex: 1 1 100%; + max-width: 100%; + } + + body.inst-phone #add-order-form .order-entry-model-row select { + flex: 1 1 auto; + min-width: 0; + max-width: 100%; + } + + body.inst-phone .order-plan-preview { + flex-direction: column; + align-items: flex-start; + gap: 6px; + } + + /* 期权:防止宽表撑破页面;表内横向滑看「操作」 */ + body.inst-phone .options-page-wrap, + body.inst-phone .options-dual-grid, + body.inst-phone .options-order-card, + body.inst-phone .options-pos-card-wrap { + max-width: 100%; + min-width: 0; + } + + body.inst-phone .options-dual-grid { + grid-template-columns: minmax(0, 1fr) !important; + } + + body.inst-phone .options-chain-toolbar.form-row { + flex-wrap: wrap; + gap: 6px; + } + + body.inst-phone .options-chain-toolbar .btn-secondary, + body.inst-phone .options-chain-toolbar select, + body.inst-phone .options-chain-toolbar .opt-chain-view-group, + body.inst-phone .options-chain-toolbar .opt-type-btn-group { + flex: 0 1 auto; + max-width: 100%; + } + + body.inst-phone .options-strike-table-wrap, + body.inst-phone .options-strike-table-wrap--t, + body.inst-phone .options-history-table-wrap, + body.inst-phone .table-wrap { + display: block; + width: 100%; + max-width: 100%; + overflow-x: auto !important; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + overscroll-behavior-x: contain; + touch-action: pan-x pan-y; + } + + body.inst-phone .options-strike-table { + width: max-content; + min-width: 100%; + } + + body.inst-phone .options-strike-table th, + body.inst-phone .options-strike-table td { + white-space: nowrap; + } + body.inst-phone .inst-mobile-tabbar { display: flex; position: fixed; diff --git a/lib/instance/templates/embed_shell.html b/lib/instance/templates/embed_shell.html index 3061205..c0ea6e8 100644 --- a/lib/instance/templates/embed_shell.html +++ b/lib/instance/templates/embed_shell.html @@ -8,7 +8,7 @@ - + {{ pwa_app_name }}