New markup over an old stylesheet
Reported from a desktop browser: a stray close button beside the logo, badly drawn, and a page that would not scroll. None of it was in the code that was running -- it was the code the browser had not fetched. The worker caches /static/ under a cache named for the release while the files in it carried no version, and a page is fetched network-first. That only ever worked because the worker used to seize every open tab the instant it installed and wipe the old cache. 1.1.0 stopped it doing that, rightly -- it was swapping stylesheets out from under a streaming reply -- and a momentary mismatch became a permanent one: new markup over the previous release's CSS for as long as the old worker lived. `.sidebar__close` had no rule there, so `.btn--icon` made it inline-flex: visible everywhere, placed by nothing. Every /static/ URL carries the release now, written by `templating.asset` and precached by `sw.js:versioned` -- both halves, because caches.match compares the query too and precaching the bare path would cache entries nothing requests. Self-correcting: updating is enough. The header was also a brand with a button appended and margin-left:auto doing the placing, which holds exactly while that button is last. Two slots now: a brand that shrinks and truncates, and a rail on the trailing edge. Verified before changing anything: with the current stylesheet the button is display:none at 1280 and, with thirty chats and forty messages, both scrollers scroll. The first measurement said the thread did not -- that was scroll-behavior: smooth reporting where it started. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -6,8 +6,8 @@
|
||||
#}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block body_attrs %} data-authenticated="true"{% endblock %}
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
#}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block body_attrs %} data-authenticated="true"{% endblock %}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
{% elif brand.icon_paths.favicon %}
|
||||
<link rel="icon" href="/branding/{{ brand.icon_paths.favicon }}">
|
||||
{% else %}
|
||||
<link rel="icon" href="{{ url_for('static', path='img/favicon.svg') }}" type="image/svg+xml">
|
||||
<link rel="icon" href="{{ asset('img/favicon.svg') }}" type="image/svg+xml">
|
||||
{% endif %}
|
||||
|
||||
{#
|
||||
@@ -57,15 +57,15 @@
|
||||
{% if brand.icon_paths['apple-touch'] %}
|
||||
<link rel="apple-touch-icon" href="/branding/{{ brand.icon_paths['apple-touch'] }}">
|
||||
{% else %}
|
||||
<link rel="apple-touch-icon" href="{{ url_for('static', path='img/apple-touch-icon-180.png') }}">
|
||||
<link rel="apple-touch-icon" href="{{ asset('img/apple-touch-icon-180.png') }}">
|
||||
{% endif %}
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="{{ brand.name }}">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/tokens.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/app.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/tokens.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
||||
{#
|
||||
Last, so an administrator's rules win, and before {% block head %} so a page's
|
||||
own stylesheet still comes after it. The query string is a hash of everything
|
||||
@@ -128,16 +128,16 @@
|
||||
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
<script src="{{ url_for('static', path='vendor/htmx.min.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', path='vendor/htmx-ext-sse.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', path='vendor/alpine.min.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', path='js/app.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', path='js/ui.js') }}" defer></script>
|
||||
<script src="{{ asset('vendor/htmx.min.js') }}" defer></script>
|
||||
<script src="{{ asset('vendor/htmx-ext-sse.js') }}" defer></script>
|
||||
<script src="{{ asset('vendor/alpine.min.js') }}" defer></script>
|
||||
<script src="{{ asset('js/app.js') }}" defer></script>
|
||||
<script src="{{ asset('js/ui.js') }}" defer></script>
|
||||
{# commands.js before composer.js: the second reads the first's table to draw
|
||||
the `/` menu, and both are deferred so the order here is the run order. #}
|
||||
<script src="{{ url_for('static', path='js/commands.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', path='js/composer.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', path='js/audio.js') }}" defer></script>
|
||||
<script src="{{ asset('js/commands.js') }}" defer></script>
|
||||
<script src="{{ asset('js/composer.js') }}" defer></script>
|
||||
<script src="{{ asset('js/audio.js') }}" defer></script>
|
||||
|
||||
{#
|
||||
The version in the query string is what versions the worker's cache, so a
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
{% block title %}{{ chat.title if chat else "New chat" }} - {{ brand.name }}{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
|
||||
{% if terminal_enabled %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='vendor/xterm.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('vendor/xterm.css') }}">
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -393,21 +393,21 @@
|
||||
{% block scripts %}
|
||||
{# Unconditional: every chat has a transcript, and this is what keeps a block
|
||||
somebody opened open across the swaps that arrive twelve times a second. #}
|
||||
<script src="{{ url_for('static', path='js/steps.js') }}" defer></script>
|
||||
<script src="{{ asset('js/steps.js') }}" defer></script>
|
||||
{% if not chat and (canvas_enabled or terminal_enabled) %}
|
||||
{# Only where there is no chat yet. It points both panels at a draft id for
|
||||
whatever the composer has selected, and does nothing at all once a chat
|
||||
exists -- which is every other page this block renders on. #}
|
||||
<script src="{{ url_for('static', path='js/draft.js') }}" defer></script>
|
||||
<script src="{{ asset('js/draft.js') }}" defer></script>
|
||||
{% endif %}
|
||||
{% if canvas_enabled %}
|
||||
<script src="{{ url_for('static', path='js/canvas.js') }}" defer></script>
|
||||
<script src="{{ asset('js/canvas.js') }}" defer></script>
|
||||
{% endif %}
|
||||
{% if terminal_enabled %}
|
||||
{# Only where it can be used. xterm is nearly three times everything else
|
||||
vendored, so a plain chat must never load it. #}
|
||||
<script src="{{ url_for('static', path='vendor/xterm.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', path='vendor/xterm-addon-fit.js') }}" defer></script>
|
||||
<script src="{{ url_for('static', path='js/terminal.js') }}" defer></script>
|
||||
<script src="{{ asset('vendor/xterm.js') }}" defer></script>
|
||||
<script src="{{ asset('vendor/xterm-addon-fit.js') }}" defer></script>
|
||||
<script src="{{ asset('js/terminal.js') }}" defer></script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
{% block title %}{{ folder.name }} - {{ brand.name }}{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block body_attrs %} data-authenticated="true"{% endblock %}
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
#}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block body_attrs %} data-authenticated="true"{% endblock %}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
{% block title %}Messages - {{ brand.name }}{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block body_attrs %} data-authenticated="true"{% endblock %}
|
||||
@@ -124,5 +124,5 @@
|
||||
DOM stub, which is the rule the working notes set out and the reason it does.
|
||||
#}
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static', path='js/steps.js') }}" defer></script>
|
||||
<script src="{{ asset('js/steps.js') }}" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -7,8 +7,26 @@
|
||||
nothing behind.
|
||||
#}
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar__header">
|
||||
{{ brandlink(uid="side") }}
|
||||
{#
|
||||
The header is two slots, not a brand with something appended to it.
|
||||
|
||||
`__brand` holds the identity and is the only part allowed to shrink;
|
||||
`__actions` is a fixed-width rail on the trailing edge that anything
|
||||
belonging to the drawer itself hangs off. It is a rail rather than one
|
||||
button because a second one -- pin the sidebar open, a search -- would
|
||||
otherwise be appended to the brand again, and the alignment would be a
|
||||
coincidence for the third time.
|
||||
|
||||
This is the standing rule about rows applied to a row that got it wrong:
|
||||
the two parts have a known width (a rail of `--control-h` boxes) and an
|
||||
unknown one (a name somebody chose), so the unknown one is the one that
|
||||
gives, and the rail is `flex: none`.
|
||||
#}
|
||||
<header class="sidebar__header">
|
||||
<div class="sidebar__brand-slot">
|
||||
{{ brandlink(uid="side") }}
|
||||
</div>
|
||||
|
||||
{#
|
||||
The way out, and the reason it is *inside* the drawer.
|
||||
|
||||
@@ -19,13 +37,18 @@
|
||||
sidebar there was no such control at all, and no way back.
|
||||
|
||||
Hidden above that breakpoint, where the sidebar is an ordinary column and
|
||||
the topbar's toggle is perfectly visible.
|
||||
the topbar's toggle is perfectly visible. It shipped *visible* on the
|
||||
desktop in 1.1.0 -- not because this rule was wrong, but because the
|
||||
browser was still drawing the page with the previous release's
|
||||
stylesheet; see `templating.asset`.
|
||||
#}
|
||||
<button class="btn btn--icon sidebar__close" type="button"
|
||||
aria-label="Close sidebar" data-toggle="#sidebar">
|
||||
{{ icon("x") }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar__actions-rail">
|
||||
<button class="btn btn--icon sidebar__close" type="button"
|
||||
aria-label="Close sidebar" data-toggle="#sidebar">
|
||||
{{ icon("x") }}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% include "partials/_sidebar_actions.html" %}
|
||||
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
#}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block body_attrs %} data-authenticated="true"{% endblock %}
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
#}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block body_attrs %} data-authenticated="true"{% endblock %}
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
{% block title %}Your settings - {{ brand.name }}{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/chat.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block body_attrs %} data-authenticated="true"{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user