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

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>
2026-09-25 13:39:35 +00:00
parent 92070d7879
commit 28390095a9
44 changed files with 2290 additions and 135 deletions
@@ -13,7 +13,15 @@
      data-themes="{{ brand.theme_list }}"{% if layout %} style="{{ layout }}"{% endif %}>
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+{#
+  `viewport-fit=cover` is what lets `env(safe-area-inset-*)` resolve to
+  anything but zero, and without it the `black-translucent` status bar style
+  below is a promise with nothing behind it: iOS puts the page under the clock
+  and the notch and the tokens that would have paid for it stay at 0.
+  No `maximum-scale` and no `user-scalable=no` -- pinch-zoom is somebody's
+  accessibility setting, not a layout problem to be suppressed.
+#}
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>{% block title %}{{ brand.name }}{% endblock %}</title>
 <meta name="description" content="{{ brand.tagline or brand.name ~ ' — a web UI for your language models.' }}">
 <meta name="color-scheme" content="dark light">
@@ -36,7 +44,16 @@
  only what the browser paints with before the stylesheet has resolved.
 #}
 <link rel="manifest" href="/manifest.webmanifest">
-<meta name="theme-color" content="#101317">
+{#
+  Two, scoped by preference, so the browser has an answer before any of our CSS
+  or JavaScript has run. There used to be one and it was Moria's near-black, so
+  every reader of the light theme got a dark browser chrome on every page load
+  until `app.js` -- which is deferred -- corrected it. `applyTheme` still has
+  the last word, and still reads the value from `--bg` rather than repeating a
+  hex here; these two are only what is painted before it can.
+#}
+<meta name="theme-color" content="#101317" media="(prefers-color-scheme: dark)">
+<meta name="theme-color" content="#F6F1E4" media="(prefers-color-scheme: light)">
 {% if brand.icon_paths['apple-touch'] %}
 <link rel="apple-touch-icon" href="/branding/{{ brand.icon_paths['apple-touch'] }}">
 {% else %}
@@ -92,6 +109,23 @@
 <body{% block body_attrs %}{% endblock %}>
 {% include "partials/icons.html" %}

+{#
+  Every fetch this application makes, said out loud.
+
+  htmx has had `htmx-request` on the triggering element since the beginning and
+  nothing here has ever used it, so a click that saved a setting, opened a
+  panel or loaded a page of a list looked exactly like a click that did nothing
+  until the answer arrived. On a local endpoint that is a few milliseconds and
+  on anything else it is long enough to click again.
+
+  One bar for the whole page rather than a spinner per control: the interesting
+  question is "is the application busy", and an indicator on the control would
+  need adding to every control ever written, which is how the last one came to
+  be used nowhere. `aria-hidden` because the answer arriving is the thing worth
+  announcing, and htmx already moves focus for that.
+#}
+<div class="progress" data-progress aria-hidden="true"><span></span></div>
+
 {% block body %}{% endblock %}

 <script src="{{ url_for('static', path='vendor/htmx.min.js') }}" defer></script>