jpnadas/finrod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(fab): float above the on-screen keyboard

Browse Source 
Two-pronged fix so the Translate + Scan FABs stay reachable when
the mobile soft keyboard is open:

- Add `interactive-widget=resizes-content` to the viewport meta —
  Chrome on Android then shrinks the layout viewport when the
  keyboard opens, so `position: fixed; bottom: ...` is naturally
  above it. iOS Safari ignores this directive, hence:
- VisualViewport listener computes
    inset = innerHeight - vv.height - vv.offsetTop
  and writes it to a `--kb-inset` CSS custom property. The FAB
  bottom calc uses `max(var(--kb-inset), safe-area-inset-bottom)`
  so the keyboard inset wins when it's open and the home-indicator
  inset wins when it isn't.

Net: tap the editor on iOS → keyboard slides up → Translate /
Scan FABs rise with it, no manual minimise required.
This commit is contained in:
João Pedro Battistella Nadas
2026-06-09 19:53:16 +02:00
parent f160c0510b
commit 86620f9f5c
2 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
static/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
<title>finrod — translator</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23d4a566'%3E%3Cpath d='M16 1 L18 14 L31 16 L18 18 L16 31 L14 18 L1 16 L14 14 Z'/%3E%3Cpath d='M16 4 L22 16 L16 28 L10 16 Z' opacity='.55'/%3E%3C/g%3E%3C/svg%3E" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block" />
@@ -190,12 +190,15 @@
.fab .material-symbols-outlined { font-size: 28px; }
.fab:hover:not(:disabled) { transform: scale(1.06); }
.fab:disabled { opacity: 0.55; cursor: progress; }
/* --kb-inset is set from JS based on VisualViewport so the FABs ride
above the on-screen keyboard. When there's no keyboard it's 0 and the
safe-area inset wins via max(). */
.fab-primary {
bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
bottom: calc(1.5rem + max(var(--kb-inset, 0px), env(safe-area-inset-bottom, 0px)));
}
.fab-secondary {
/* sits above the primary: 56 (primary height) + 0.75rem gap + base offset */
bottom: calc(1.5rem + 56px + 0.75rem + env(safe-area-inset-bottom, 0px));
bottom: calc(1.5rem + 56px + 0.75rem + max(var(--kb-inset, 0px), env(safe-area-inset-bottom, 0px)));
}
.fab.busy {
animation: fab-pulse 1.4s ease-in-out infinite;
@@ -1140,6 +1143,26 @@
Vim.mapCommand("L", "action", "finrodFocusNext", {}, { context: "normal" });
}
// Keep the FABs floating above the on-screen keyboard when it's open.
// On Chrome+Android the `interactive-widget=resizes-content` meta directive
// already shrinks the layout viewport — kb-inset stays 0 there.
// On iOS Safari (which ignores the meta) the layout viewport stays full
// and we compute the hidden bottom strip from VisualViewport.
function updateKbInset() {
const vv = window.visualViewport;
if (!vv) {
document.documentElement.style.setProperty("--kb-inset", "0px");
return;
}
const inset = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
document.documentElement.style.setProperty("--kb-inset", inset + "px");
}
if (window.visualViewport) {
window.visualViewport.addEventListener("resize", updateKbInset);
window.visualViewport.addEventListener("scroll", updateKbInset);
}
updateKbInset();
fillLangs();
loadModels().then(() => refreshLoaded(true));
</script>