ncode
066b9e8c34
The app sometimes drew under the status and gesture bars and sometimes between them. Cause: Capacitor 8 ships a SystemBars plugin that already handles insets, from a listener on the decor view, and my MainActivity had installed another one on the WebView. Different views, so they stacked rather than replaced each other and the result depended on which fired last. SystemBars switches on the viewport meta tag. With viewport-fit=cover it passes insets through once onPageCommitVisible has checked the tag, decor padding drops to 0 and the WebView grows 735 -> 820, leaving the page to place itself from injected CSS vars. Without it the plugin pads the decor view and the WebView is laid out between the bars already. So sync-www.sh now strips viewport-fit=cover from the generated www/ (patch 5), MainActivity is an empty BridgeActivity, native.css and native.js no longer touch insets, and bar style moves to capacitor.config.json. No native->web handshake remains, so there is nothing to race and no launch-time layout jump. Verified identical across 3 cold launches, 2 resumes and an in-place reload: h=735 padTop=8px overflowBy=0, panel 485px, pad rows 44.8px. Costs no space: 820-45-114 and 735-8-66 both leave 661px. The bars take the same room either way. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
65 lines
3.3 KiB
CSS
65 lines
3.3 KiB
CSS
/* Native-only overrides.
|
|
reference/ is never edited; sync-www.sh injects this as the last stylesheet
|
|
in <head>, so on equal specificity these rules win. */
|
|
|
|
/* No inset handling here on purpose.
|
|
|
|
sync-www.sh strips viewport-fit=cover from the generated www/, so Capacitor's
|
|
SystemBars plugin pads the decor view and the WebView is laid out between the
|
|
status and gesture bars already. env(safe-area-inset-*) is therefore 0, the
|
|
reference's --sab resolves to 0, and .bnav and .sheet are correct as written.
|
|
|
|
An earlier version mapped --sab onto values pushed from MainActivity. That
|
|
raced with Capacitor's own listener - see CLAUDE.md. */
|
|
|
|
@media (max-width:820px){
|
|
/* ---------- strip ergonomics (Phase 1 UI fix) ----------
|
|
The reference spaces its two chip rows with `#strip .chips + .chips`, but
|
|
on phones the .lbl heading between them is display:none and still in the
|
|
DOM, so the adjacent-sibling selector never matches and the rows sit flush
|
|
(measured: 0px gap). native.js collapses both rows into the two pickers
|
|
below. Phase 2 must carry this - see CLAUDE.md. */
|
|
|
|
/* Mode and layer pickers share one row: only one layer is ever active, so
|
|
neither needs a scrolling row of its own. One 44px row instead of two gives
|
|
the panel back 52px, which it needs - its pad rows sit at their
|
|
minmax(34px,1fr) floor, so anything less clips the illustration. */
|
|
.stripbar{ display: flex; gap: 8px; }
|
|
.stripbar .ctxbtn{ flex: 1 1 0; min-width: 0; font-size: 1rem; padding: 8px 12px; }
|
|
|
|
.ctxbtn{
|
|
display: flex; align-items: center; justify-content: space-between; gap: 10px;
|
|
width: 100%; min-height: 44px; padding: 8px 14px;
|
|
font-family: var(--fc); font-size: 1.05rem; font-weight: 600;
|
|
background: var(--card); color: var(--ink);
|
|
border: 1px solid var(--line); border-radius: 10px;
|
|
text-align: left; cursor: pointer;
|
|
}
|
|
.ctxbtn b{ font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.ctxbtn > span{ color: var(--muted); flex: 0 0 auto; }
|
|
|
|
/* Real 44px targets. These scroll horizontally, so an undersized target
|
|
turns a mis-hit into a scroll rather than a tap. */
|
|
#strip .chips{ margin-top: 8px; }
|
|
#strip .chips .chip{ min-height: 44px; padding: 8px 14px; }
|
|
|
|
/* Scroll affordance. native.js sets data-more only on rows that actually
|
|
overflow, so the fade never appears where there is nothing to reach. */
|
|
#strip .chips[data-more]{
|
|
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
|
|
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
|
|
}
|
|
}
|
|
|
|
/* Mode and layer rows inside the sheet. The mode rows use CTXHINT from the
|
|
reference, which the phone layout otherwise never shows. */
|
|
.ctxopt{
|
|
display: block; width: 100%; text-align: left; color: inherit;
|
|
background: var(--card); border: 1px solid var(--line); border-radius: 10px;
|
|
padding: 10px 14px; margin-bottom: 8px; min-height: 44px; cursor: pointer;
|
|
}
|
|
.ctxopt[aria-pressed="true"]{ background: var(--ink); color: var(--page); border-color: var(--ink); }
|
|
.ctxopt b{ display: block; font-family: var(--fc); font-size: 1.1rem; line-height: 1.2; }
|
|
.ctxopt .hint{ font-size: .85rem; color: var(--muted); }
|
|
.ctxopt[aria-pressed="true"] .hint{ color: var(--page); opacity: .75; }
|