From 438d111718b44ddd7399149f67e4d7f8f3850f86 Mon Sep 17 00:00:00 2001 From: Bernard Siebens Date: Mon, 27 Jul 2026 10:19:15 +0200 Subject: [PATCH] Make the navbar responsive on small phone widths Icon-only buttons and truncated labels below the sm breakpoint keep the navbar from forcing the page wider than the device. Also adds a Django admin shortcut for superusers and pins the scrollbar gutter so short and tall pages no longer shift width against each other. --- templates/_base.html | 39 +++++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/templates/_base.html b/templates/_base.html index e652d26..9069285 100644 --- a/templates/_base.html +++ b/templates/_base.html @@ -40,21 +40,38 @@ and a "sticky" sidebar still drifts on a long page, which is the thing this is for. {% endcomment %} -
-
+ {% comment %} + Every text label on the right (theme name, "Django admin", the user's email) is + wrapped in `hidden sm:inline` — icon-only below the `sm` breakpoint, with the + button's own padding doing the rest (no fixed width to fight). None of these + buttons wrap or shrink on their own (button labels don't break), so on a + 360-400px phone the unlabelled row is what keeps the navbar from forcing the + whole page wider than the device — which, left unchecked, makes the browser + zoom the entire layout out to fit rather than actually rendering at device width. + `min-w-0` on the brand block matters for the same reason: a flex item defaults to + `min-width: auto`, which ignores `flex-1` and refuses to shrink past its content's + intrinsic width. + {% endcomment %} +
+
{% block brand %}{% endblock brand %}
- {% if user.is_authenticated %} + {% if user.is_superuser %} + {% lucide "shield-cog" %} + {% endif %} +
-
{% lucide "circle-user" %}{{ user.get_full_name }}
+
{% lucide "circle-user" %}
    +
  • {{ user.email }}
  • {% lucide "shield-check" size=16 %} Two-factor authentication
    • @@ -79,7 +96,13 @@ {% endcomment %} {% block menu %}{% endblock menu %} -
    + {% comment %} + `scrollbar-gutter: stable` reserves the scrollbar's width whether or not + the page actually overflows -- without it, a short page (nothing to + scroll) renders a hair wider than a tall one (scrollbar eats the width), + and switching between them visibly shifts the content. + {% endcomment %} +
    {% if messages %}