From 190b185d3e1e9f64c56aa8a84de4701a10814e0f Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 26 Jul 2026 18:20:03 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20=E4=BF=AE=E5=A4=8D=E5=AE=89?= =?UTF-8?q?=E5=8D=93=E7=AB=AF=E7=95=8C=E9=9D=A2=E9=80=82=E9=85=8D=EF=BC=9A?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=A7=86=E5=8F=A3=E9=AB=98=E5=BA=A6=20+=20?= =?UTF-8?q?=E7=AA=84=E5=B1=8F=E8=A1=A8=E6=A0=BC/=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E8=A1=8C=E9=87=8D=E6=8E=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 安卓浏览器（Firefox / Edge / Kiwi 等）上： - 整页外壳用 100vh，而 vh 取「大视口」，显示地址栏时外壳比可见区域高， 且外壳内部滚动导致文档本身不可滚动，底部 Tab 栏/操作栏落在可视区外无法触达； 软键盘默认只压缩可视视口，编辑器底部工具栏与输入框被键盘遮挡。 改为 h-dvh / min-h-dvh，并在整页入口声明 interactive-widget=resizes-content。 - 编辑器「储存 / 资源」子视图是桌面表格：工具栏单行溢出（清空按钮被裁切）、 固定列宽让表头文案在窄屏重叠。移动端改为竖排卡片行 + 换行工具栏， 桌面端用 md:contents 保持原有列对齐。 - 设置 / 工具页的 SettingRow 横排 + 固定宽控件，把文案挤成每行一两个词； 移动端改为竖排。脚本设置子视图的固定宽控件补 max-w-full 避免越界。 close scriptscat/scriptcat#1555 Co-authored-by: RenjiYuusei --- docs/references/design-patterns.md | 14 +++ src/pages/batchupdate.html | 2 +- src/pages/batchupdate/components.tsx | 2 +- src/pages/batchupdate/mobile.tsx | 2 +- src/pages/confirm.html | 2 +- src/pages/confirm/App.tsx | 2 +- src/pages/import.html | 2 +- src/pages/import/components.tsx | 2 +- src/pages/import/mobile.tsx | 4 +- src/pages/install.html | 2 +- .../install/components/InstallLayout.tsx | 2 +- .../install/components/InstallStates.tsx | 2 +- src/pages/options.html | 2 +- src/pages/options/App.test.tsx | 13 +++ src/pages/options/App.tsx | 6 +- src/pages/options/components/SettingRow.tsx | 5 +- src/pages/options/layout/Sidebar.tsx | 2 +- .../routes/ScriptEditor/tabs/ResourcePane.tsx | 103 ++++++++++-------- .../routes/ScriptEditor/tabs/SettingsPane.tsx | 8 +- .../routes/ScriptEditor/tabs/StoragePane.tsx | 98 +++++++++-------- src/pages/viewport-meta.test.ts | 22 ++++ 21 files changed, 179 insertions(+), 118 deletions(-) create mode 100644 src/pages/viewport-meta.test.ts diff --git a/docs/references/design-patterns.md b/docs/references/design-patterns.md index 8e06d3b68..a968247a4 100644 --- a/docs/references/design-patterns.md +++ b/docs/references/design-patterns.md @@ -19,6 +19,20 @@ function Page() { } ``` +### Viewport height & on-screen keyboard + +Page shells are height-locked to the viewport (`TopBar + scroll container + ActionBar`), so they must use the +**dynamic** viewport units — `h-dvh` / `min-h-dvh`, never `h-screen` / `100vh`. `vh` resolves against the +*large* viewport (browser UI retracted), so on Android — Firefox, Edge, Kiwi alike — a `100vh` shell is taller +than the visible area while the toolbar is showing, and because the shell scrolls internally the document +itself can't scroll, leaving `BottomTabBar` / ActionBar unreachable below the fold (issue #1555). + +The full-page entries (`options` / `install` / `import` / `batchupdate` / `confirm`) additionally declare +`interactive-widget=resizes-content` in their ``: the default `resizes-visual` shrinks +only the visual viewport when the on-screen keyboard opens, leaving a `dvh` shell (and the editor toolbar under +it) hidden behind the keyboard. `resizes-content` shrinks the layout viewport instead, so the shell reflows +above the keyboard. `popup.html` is excluded — it is a fixed-size panel that scrolls as a whole. + ### Desktop ↔ mobile transforms | Desktop (≥768px) | Mobile (<768px) | diff --git a/src/pages/batchupdate.html b/src/pages/batchupdate.html index 53a01f254..1bd8b2251 100644 --- a/src/pages/batchupdate.html +++ b/src/pages/batchupdate.html @@ -2,7 +2,7 @@ - + ScriptCat