luxick/datascape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pin toolbar to the bottom on mobile

Browse Source
This commit is contained in:
luxick
2026-06-05 10:47:38 +02:00
parent 11cae7df36
commit 5525a03179
4 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/style.css
+21 -3
View File
@@ -695,9 +695,27 @@ aside.sidebar:empty { display: none; }
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0 var(--space-2);
min-width: 2rem;
min-height: 2rem;
padding: 0 var(--space-1);
}
/* Pin the toolbar above the on-screen keyboard rather than at the top, which
is out of thumb reach while typing. interactive-widget=resizes-content
(layout.html viewport) shrinks the viewport on keyboard open so bottom: 0
sits directly above it. cm-content reserves matching scroll space so the
last lines aren't hidden behind the bar. */
body.edit-mode .editor-toolbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
border: none;
border-top: var(--border);
padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
}
body.edit-mode .cm-content {
padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}
.modal-backdrop { padding: var(--space-2); align-items: flex-start; }
.modal { max-width: none; margin-top: var(--space-4); }