From ca54e83f9cc33bf982a7f4bf3e7a81c22c95d5fb Mon Sep 17 00:00:00 2001
From: Ray Slakinski <19767+rays@users.noreply.github.com>
Date: Sun, 8 Nov 2026 14:25:27 -0500
Subject: [PATCH] Phone: the bottom totals are text alone, set in from the
 sides (#424)

#status kept its own background and top rule to the bottom edge on a
narrow screen, where the rounded corners of the phone cut the band off
and the text sat against the curve; the glass theme's tinted, blurred
band made it plainest. Transparent, no rule, 24px in from each side.
Checked in the simulator against the built page in the glass theme.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 web/CHANGELOG.md | 1 +
 web/app.css      | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/web/CHANGELOG.md b/web/CHANGELOG.md
index 08a0b97..b24f9f7 100644
--- a/web/CHANGELOG.md
+++ b/web/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- On a phone the totals along the bottom (All Subscriptions: N items, N unread) are text alone, set in from the sides, instead of a band and rule that ran to the bottom edge and were cut off by the screen's rounded corners (#424).
 - The admin page's top bar clears the status bar in the iOS app, so its back button can be tapped; the page asked for no room under the clock as the app page does (#423).
 - Swiping, or j, through more than 50 items no longer stops at the 50th until a reload: the next ones are fetched as you near the end, and Load more on the Unread tab no longer skips as many unread items as you had read (#383).
 - On the Unread tab, a short list read through no longer asks the server for more that is not there, or shows a count of 0 items beside the items still on screen (#385).
diff --git a/web/app.css b/web/app.css
index fa2faed..7508ad8 100644
--- a/web/app.css
+++ b/web/app.css
@@ -1671,6 +1671,15 @@ body:has(#player.on) #status{padding-bottom:3px}
      at a seam: near-black above a blue bar (#147). */
   :root[data-theme="glass"] #topbar{background:var(--glass-bar);-webkit-backdrop-filter:none;backdrop-filter:none}
 }
+@media (max-width:820px){
+  /* The totals along the bottom keep neither their band nor their rule on a phone: both run to the
+     bottom edge, where the screen's rounded corners cut them off, and the text sat against the
+     curve (#424). Text alone, set in from the sides. Longhand, as #topbar's padding is. */
+  #status,:root[data-theme="glass"] #status{
+    background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-top-color:transparent;
+    padding-left:calc(24px + var(--safe-l));padding-right:calc(24px + var(--safe-r));
+  }
+}
 /* Someone who has asked the system for less transparency, or more contrast, gets solid panels. */
 @media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
   :root[data-theme="glass"] body{background:var(--bg)}