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

A phone, and how much of this could not be used on one

Browse Source 
The sidebar was a 280px panel laid over the page below the phone breakpoint,
opened from first paint, with the only control that closed it underneath it --
and that control existed on /chat and on none of the seven other pages carrying
a sidebar, Settings included. It starts closed at that width now, slides, dims
the page behind it, and closes by tapping beside it, by Escape, or by its own
button, which is inside the drawer where it can be reached.

Everything a finger has to hit was 36px, or 28 for renaming a chat, every action
on a message and every panel's close button. Raising --control-h under a coarse
pointer is the only fix that reaches all forty of them, which is what that token
is for. The row and message actions were also hover-only, so on a phone they did
not exist at all.

Installing: the splash and the browser chrome follow the instance's theme rather
than always being Moria's near-black; there are screenshots, so the install
offer is a dialog rather than a one-line bar; a new release no longer takes over
a page somebody is reading; the notification badge is a silhouette rather than a
grey square; and a browser rotating its own subscription no longer ends
notifications for good.

Every request now says it is happening -- nothing did before, so anything slower
than a few milliseconds looked like a click that had not registered.

A chat can be archived. The column has been filtered on in four places since
folders arrived and written by nothing, which is what made it look built.

chat.css may contain media queries. The ban protected the composer toolbar from
being "fixed" with a breakpoint; that guarantee is asserted directly now, and
the old test would have passed a version of the file that wrapped the toolbar
without one.

scripts/shoot.py is the instrument all of this was found with: it renders a page
through TestClient into a real headless browser at a real size and refuses to
run if an asset URL was left pointing at testserver.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Homer
2026-09-25 13:39:35 +00:00
co-authored by Claude Opus 5
parent 92070d7879
commit 28390095a9
44 changed files with 2290 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lembas/web/static/css/admin.css
+55 -19
View File
@@ -22,7 +22,10 @@
.page,
.admin-page {
max-width: 48rem;
/* The same measure as the transcript, and the same token: a settings page and
a conversation are both prose, and having them differ by a rounding is the
kind of thing nobody reports and everybody notices. */
max-width: var(--thread-max-width);
margin: 0 auto;
padding: var(--sp-6) var(--sp-5) var(--sp-12);
}
@@ -71,7 +74,7 @@
align-items: center;
gap: var(--sp-1);
padding: 0 var(--sp-5);
border-bottom: 1px solid var(--border);
border-bottom: var(--border-w) solid var(--border);
background: var(--bg);
flex: none;
overflow-x: auto;
@@ -87,7 +90,7 @@
contexts and would otherwise paint over it. */
position: sticky;
top: 0;
z-index: 1;
z-index: var(--z-raised);
}
.tabs__tab {
@@ -96,7 +99,7 @@
gap: var(--sp-2);
height: var(--control-h-lg);
padding: 0 var(--sp-4);
border-bottom: 2px solid transparent;
border-bottom: var(--border-w-thick) solid transparent;
color: var(--ink-muted);
font-size: var(--text-sm);
font-weight: 500;
@@ -146,7 +149,40 @@ a.tabs__tab { text-decoration: none; }
.tabs__bar:has(input:nth-of-type(8):checked) ~ .tabs__body .tabs__panel:nth-of-type(8) {
display: block;
}
.tabs__tab:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabs__tab:has(:focus-visible) { outline: var(--outline-w) solid var(--accent); outline-offset: -2px; }
/*
The bar scrolls sideways when the tabs do not fit, and said nothing about it.
`scrollbar-width: none` is right -- a scrollbar under a row of tabs is ugly
and, on a touch device, invisible anyway -- but with nothing in its place the
overflow is undetectable. On a 390px phone the six tabs on /settings overflow
by about 190px, and the two that fall off the end are Memory and Security,
with Appearance only just reachable. Appearance is where both the Install and
the Notifications buttons live, so the effect was an install prompt nobody
could find on the device it exists for.
A fade at the edge that is only painted when there is something behind it:
`scroll-driven` would be nicer and is not universal, so this is two gradients
pinned to the scrollport with `background-attachment: local`, which is the old
trick and works everywhere -- the `local` layers scroll with the content and
cover the `scroll` ones exactly when there is nothing more to see.
*/
.tabs__bar {
background-image:
linear-gradient(to right, var(--bg) 40%, transparent),
linear-gradient(to left, var(--bg) 40%, transparent),
linear-gradient(to right, var(--scrim), transparent 1.5rem),
linear-gradient(to left, var(--scrim), transparent 1.5rem);
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 1.5rem 100%;
background-attachment: local, local, scroll, scroll;
/* A tab is a destination, so a flick should land on one rather than between
two. */
scroll-snap-type: x proximity;
}
.tabs__tab { scroll-snap-align: start; }
/*
A form's action row, and the space after the form it closes.
@@ -173,7 +209,7 @@ a.tabs__tab { text-decoration: none; }
/* --- Cards ----------------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-5);
margin-bottom: var(--sp-4);
@@ -199,7 +235,7 @@ a.tabs__tab { text-decoration: none; }
gap: var(--sp-3);
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
border-top: var(--border-w) solid var(--border);
flex-wrap: wrap;
}
.card__header {
@@ -235,7 +271,7 @@ a.tabs__tab { text-decoration: none; }
gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.connection__footer { display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4);
border-top: 1px solid var(--border); flex-wrap: wrap; }
border-top: var(--border-w) solid var(--border); flex-wrap: wrap; }
.field--actions { margin-top: var(--sp-5); margin-bottom: 0; }
/* --- Definition lists ------------------------------------------------------ */
@@ -273,7 +309,7 @@ a.tabs__tab { text-decoration: none; }
display: flex;
gap: var(--sp-1);
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
border-bottom: var(--border-w) solid var(--border);
}
.filter-tab {
display: inline-flex;
@@ -281,7 +317,7 @@ a.tabs__tab { text-decoration: none; }
gap: var(--sp-2);
height: var(--control-h);
padding: 0 var(--sp-3);
border-bottom: 2px solid transparent;
border-bottom: var(--border-w-thick) solid transparent;
color: var(--ink-muted);
font-size: var(--text-sm);
font-weight: 500;
@@ -315,7 +351,7 @@ a.tabs__tab { text-decoration: none; }
gap: var(--sp-2);
flex-wrap: wrap;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom: 0;
background: var(--bg-sunken);
@@ -323,7 +359,7 @@ a.tabs__tab { text-decoration: none; }
.bulk-bar__label { font-size: var(--text-sm); color: var(--ink-muted); }
.model-rows {
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden;
background: var(--surface);
@@ -333,7 +369,7 @@ a.tabs__tab { text-decoration: none; }
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border);
border-bottom: var(--border-w) solid var(--border);
}
.model-row:last-child { border-bottom: 0; }
.model-row:hover { background: var(--surface-hover); }
@@ -408,7 +444,7 @@ a.tabs__tab { text-decoration: none; }
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border);
border-bottom: var(--border-w) solid var(--border);
}
.model-list__item:first-child { padding-top: 0; }
.model-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
@@ -425,7 +461,7 @@ a.tabs__tab { text-decoration: none; }
.perm-row {
align-items: flex-start;
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border);
border-bottom: var(--border-w) solid var(--border);
}
.perm-row:last-child { border-bottom: 0; }
.perm-row input { margin-top: 0.15rem; }
@@ -470,7 +506,7 @@ a.tabs__tab { text-decoration: none; }
gap: var(--sp-3);
align-items: baseline;
padding: var(--sp-2) 0;
border-top: 1px solid var(--border);
border-top: var(--border-w) solid var(--border);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
@@ -496,7 +532,7 @@ a.tabs__tab { text-decoration: none; }
white-space: pre-wrap;
overflow-wrap: anywhere;
background: var(--code-bg);
border: 1px solid var(--code-border);
border: var(--border-w) solid var(--code-border);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: var(--text-xs);
@@ -523,7 +559,7 @@ a.tabs__tab { text-decoration: none; }
padding: 0.05em 0.3em;
border-radius: var(--radius-sm);
background: var(--code-bg);
border: 1px solid var(--code-border);
border: var(--border-w) solid var(--code-border);
}
/* --- The permission modes, explained on the agents page ------------------- */
@@ -552,7 +588,7 @@ a.tabs__tab { text-decoration: none; }
correct: `_rule_from_form` reads only the keys the chosen repeat mode uses.
*/
.schedule-repeat {
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-md);
padding: var(--sp-4);
margin-bottom: var(--sp-4);