mirror of
https://github.com/bretzel-app/crumbs.git
synced 2026-10-12 20:06:57 +02:00
Frederic CabassutandClaude Fable 5
4b7e346206
Add interactive-widget=resizes-content to the viewport meta so the Android keyboard shrinks the layout viewport through the native inset path. Chromium's visualViewport.height can under-report the visible height by the system nav-bar height, which left the editor toolbar floating above the keyboard; the native resize path is accurate. iOS ignores the attribute and keeps using the visualViewport tracking in NoteEditor. Position toolbar dropdown portals with window.innerHeight instead of visualViewport.height: CSS bottom on position:fixed and getBoundingClientRect() both use layout-viewport coordinates, so mixing in the visual-viewport height pushed dropdowns behind the keyboard while it was open. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
40 lines
1.9 KiB
HTML
40 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<!-- interactive-widget=resizes-content: on Android the keyboard shrinks the layout viewport via
|
|
the native inset path, so bottom-anchored UI (editor toolbar) lands exactly on the keyboard —
|
|
Chromium's visualViewport.height can under-report by the nav-bar height. iOS ignores this
|
|
attribute and relies on the visualViewport tracking in NoteEditor instead. -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
|
|
<meta name="theme-color" content="#f0e6d3" />
|
|
<script>
|
|
(function() {
|
|
try {
|
|
var p = JSON.parse(localStorage.getItem('crumbs-preferences') || '{}');
|
|
var t = p.theme || 'system';
|
|
if (t !== 'light' && t !== 'dark') t = 'system';
|
|
if (t === 'system') t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
if (t === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
var m = document.querySelector('meta[name="theme-color"]');
|
|
if (m) m.content = '#1a1715';
|
|
}
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<meta name="apple-mobile-web-app-title" content="Crumbs" />
|
|
<title>Crumbs</title>
|
|
%sveltekit.head%
|
|
</head>
|
|
<body data-sveltekit-preload-data="hover">
|
|
<div style="display: contents">%sveltekit.body%</div>
|
|
</body>
|
|
</html>
|