Houmeres/LLeMbas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 23 Wiki Activity

A model menu that stays on the phone

Browse Source 
Inside a chat the picker sits mid-bar with the panel buttons to its right,
and its menu opened from the picker's right edge -- at 390px it spanned
x = -132..226, cutting every model's name off. Below 48rem the bar is now
the containing block and the menu is pinned between its edges (capped at
24rem). Opening it on a touchscreen no longer focuses the filter, which
raised the keyboard over half the list.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Homer
2026-09-27 20:36:45 +00:00
co-authored by Claude Opus 5.5
parent da43bc1459
commit 793f9c8cad
6 changed files with 75 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lembas/web/static/css/app.css
+17
View File
@@ -1377,6 +1377,23 @@ body.is-resizing .canvas__body { pointer-events: none; }
which nothing else on the screen tells you -- gets the room back. */
.topbar__actions .picker__label { display: none; }
/* And the menu is the bar's, not the picker's. Anchored to the picker it
opens `right: 0` of a button that sits mid-bar with the panel buttons to
its right, so a 24rem menu ran off the left edge of a 390px phone and cut
every name in half. Taking `position` off the picker makes the bar the
containing block: the menu spans the bar under it, whatever sits where --
up to its usual 24rem, held at the bar's right edge by the auto margin. */
.topbar { position: relative; }
.topbar__actions .picker { position: static; }
.topbar__actions .picker__menu {
left: max(var(--sp-2), var(--safe-left));
right: max(var(--sp-2), var(--safe-right));
width: auto;
max-width: 24rem;
margin-left: auto;
}
.topbar__actions .picker__list { max-height: min(22rem, 60dvh); }
.sidebar {
position: fixed;
inset: 0 auto 0 0;
src/lembas/web/static/js/ui.js
+5
View File
@@ -320,6 +320,11 @@
if (filter) {
filter.value = "";
applyFilter(menu, "");
}
// Not on a touchscreen: focusing a text field there raises the keyboard,
// which covers half the list the finger came to choose from. The filter
// is one tap away for whoever wants it.
if (filter && !window.matchMedia("(hover: none)").matches) {
filter.focus();
} else {
var selected = menu.querySelector(".picker__option.is-selected") ||