From 03babfb02a066d677895323e0663f75b81c7d9a3 Mon Sep 17 00:00:00 2001
From: Levi Neuwirth <ln@levineuwirth.org>
Date: Mon, 13 Apr 2026 11:05:01 -0400
Subject: [PATCH] new mobile fix

---
 static/css/components.css | 128 ++++++++++++++++++++------------------
 static/css/new.css        |  36 +++++++++++
 2 files changed, 105 insertions(+), 59 deletions(-)

diff --git a/static/css/components.css b/static/css/components.css
index 7c77f6a..0eb0563 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -283,6 +283,75 @@ nav.site-nav {
     scroll-behavior:          auto   !important;
 }
 
+/* Mobile TOC bar — hidden by default; revealed whenever the desktop
+   TOC sidebar is hidden (see layout.css: #toc hides at ≤900px).
+   Declared here (before the media queries) so source-order cascade
+   lets the mobile rules win. */
+#toc-mobile-bar {
+    display: none;
+}
+
+/* ── Mobile TOC bar (≤900px — mirrors #toc hide breakpoint) ──────────
+   Fixed bottom strip: progress line + current section label.
+   toc.js sets --toc-progress and syncs the label. Uses (max-width)
+   rather than (pointer: coarse) so Android's "request desktop site"
+   mode — which fakes a ~980px viewport — correctly shows the desktop
+   sidebar TOC instead of this bar.
+   ──────────────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+    /* Bottom padding so the last content line isn't hidden
+       behind the fixed mobile TOC bar. */
+    body {
+        padding-bottom: 2.5rem;
+    }
+
+    #toc-mobile-bar {
+        display: flex;
+        align-items: center;
+        position: fixed;
+        bottom: 0; left: 0; right: 0;
+        height: 2.25rem;
+        background: var(--bg-nav);
+        border-top: 1px solid var(--border);
+        padding: 0 1rem;
+        z-index: 90;
+        overflow: hidden;
+    }
+
+    /* Progress track (faint full-width line at top of bar) */
+    #toc-mobile-bar::before {
+        content: '';
+        position: absolute;
+        top: 0; left: 0; right: 0;
+        height: 2px;
+        background: var(--border);
+    }
+
+    /* Progress fill — grows with scroll via --toc-progress */
+    #toc-mobile-bar::after {
+        content: '';
+        position: absolute;
+        top: 0; left: 0;
+        height: 2px;
+        width: calc(var(--toc-progress, 0) * 100%);
+        background: var(--text-muted);
+        transition: width 0.12s ease;
+    }
+
+    .toc-mobile-label {
+        font-family: var(--font-sans);
+        font-size: 0.68rem;
+        font-weight: 600;
+        font-variant-caps: all-small-caps;
+        letter-spacing: 0.07em;
+        color: var(--text-faint);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
 /* ── Mobile nav (≤540px) ─────────────────────────────────────────────
    Controls are position:absolute on desktop (out of flex flow, pinned
    right). On narrow viewports they collide with the primary links.
@@ -342,59 +411,6 @@ nav.site-nav {
     .nav-portals a {
         padding: 0.3rem 0.55rem;
     }
-
-    /* Extra bottom padding so the last content line isn't hidden
-       behind the fixed mobile TOC bar. */
-    body {
-        padding-bottom: 2.5rem;
-    }
-
-    /* Mobile TOC bar — fixed bottom strip: progress line + current
-       section label. toc.js sets --toc-progress and syncs the label. */
-    #toc-mobile-bar {
-        display: flex;
-        align-items: center;
-        position: fixed;
-        bottom: 0; left: 0; right: 0;
-        height: 2.25rem;
-        background: var(--bg-nav);
-        border-top: 1px solid var(--border);
-        padding: 0 1rem;
-        z-index: 90;
-        overflow: hidden;
-    }
-
-    /* Progress track (faint full-width line at top of bar) */
-    #toc-mobile-bar::before {
-        content: '';
-        position: absolute;
-        top: 0; left: 0; right: 0;
-        height: 2px;
-        background: var(--border);
-    }
-
-    /* Progress fill — grows with scroll via --toc-progress */
-    #toc-mobile-bar::after {
-        content: '';
-        position: absolute;
-        top: 0; left: 0;
-        height: 2px;
-        width: calc(var(--toc-progress, 0) * 100%);
-        background: var(--text-muted);
-        transition: width 0.12s ease;
-    }
-
-    .toc-mobile-label {
-        font-family: var(--font-sans);
-        font-size: 0.68rem;
-        font-weight: 600;
-        font-variant-caps: all-small-caps;
-        letter-spacing: 0.07em;
-        color: var(--text-faint);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
 }
 
 /* Row 2: portal links — hidden until nav.js adds .is-open */
@@ -436,12 +452,6 @@ nav.site-nav {
    and the --toc-progress custom property for the progress bar.
    ============================================================ */
 
-/* Mobile TOC bar — hidden on all viewports by default; the ≤540px
-   media query below makes it visible on mobile only. */
-#toc-mobile-bar {
-    display: none;
-}
-
 #toc {
     font-family: var(--font-sans);
     font-size: 0.85rem;
diff --git a/static/css/new.css b/static/css/new.css
index a75582c..8f3da37 100644
--- a/static/css/new.css
+++ b/static/css/new.css
@@ -147,3 +147,39 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+
+/* ============================================================
+   MOBILE (≤540px)
+   The desktop layout packs [badge | title  ...  date] in a
+   single flex row. On narrow phones the date's nowrap width +
+   title min-content + gap overflows the viewport, pushing
+   titles off the right edge. Stack title-over-date and shrink
+   the badge so .new-entry-main gets real room.
+   ============================================================ */
+
+@media (max-width: 540px) {
+    .new-entry {
+        gap: 0.65rem;
+    }
+
+    .new-entry-kind {
+        min-width: 0;
+        padding: 0.15em 0.4em;
+        font-size: 0.58rem;
+    }
+
+    .new-entry-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.15rem;
+    }
+
+    .new-entry-title {
+        font-size: 0.95rem;
+        overflow-wrap: anywhere;
+    }
+
+    .new-entry-date {
+        font-size: 0.68rem;
+    }
+}