From a12aa599703b0c064b0bca0c15217d229ee3221c Mon Sep 17 00:00:00 2001 From: rays Date: Fri, 9 Oct 2026 01:09:36 +0000 Subject: [PATCH] Shadow the feed list on a phone only while it is open (#151) On a phone the feed list is a drawer slid off the screen to the left, and it kept its shadow there, which fell back across the page: the left 30px or so of the top bar and everything under it were darker, in every theme (Glass light 231,233,243 at the edge against 246,247,255). Beside the flat strip iOS paints above the page it made a seam at the top-left corner (#147). Hiding the closed drawer instead (visibility) would also have done it, but every phone test starts by waiting for the feed list to be visible, which off the screen it still counts as. Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 1 + web/app.css | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66d7860..206d2f0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +- On a phone, the closed feed list no longer shades the left edge of the page with its shadow. - On an iPhone, the top bar's colour runs all the way up behind the status bar and the Dynamic Island, with no band of another colour above it. - A feed's buttons stay on one row on a narrow phone, and the reader's buttons stay together instead of breaking across lines under a long feed name. - A moment's DNS failure no longer marks a feed as failing for a day or calls it gone: iPX tries it again in ten minutes. One failed lookup one morning left 205 podcasts unread, uncategorised and labelled gone until the next day. A name that does not resolve is said to be maybe gone, and only once it has been failing a day, on its Directory page as on its own. diff --git a/web/app.css b/web/app.css index bf3ccf6..1e87974 100644 --- a/web/app.css +++ b/web/app.css @@ -1089,8 +1089,10 @@ body:has(#player.on) #status{padding-bottom:3px} @media (max-width:820px){ #shell{grid-template-columns:1fr} - #sidebar{position:fixed;inset:0 auto 0 0;padding-top:var(--safe-t);width:min(300px,86vw);z-index:42;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)} - #sidebar.open{transform:none} + /* The shadow only while open: off the screen, the drawer's fell across the page's left edge, + the top bar's included (#151). */ + #sidebar{position:fixed;inset:0 auto 0 0;padding-top:var(--safe-t);width:min(300px,86vw);z-index:42;transform:translateX(-100%);transition:transform .2s,box-shadow .2s} + #sidebar.open{transform:none;box-shadow:var(--shadow)} #scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:41} #player{ position:relative;z-index:39;gap:8px; @@ -1371,7 +1373,7 @@ body:has(#player.on) #status{padding-bottom:3px} :root[data-theme="glass"] .toast.bad{border-color:var(--bad)} /* A narrow screen slides the feed list over the page, so it keeps its shadow. */ @media (max-width:820px){ - :root[data-theme="glass"] #sidebar{box-shadow:inset -1px 0 0 var(--glass-hi),var(--shadow)} + :root[data-theme="glass"] #sidebar.open{box-shadow:inset -1px 0 0 var(--glass-hi),var(--shadow)} } /* The card is the glass; a lighter scrim leaves something behind it to see through. */ :root[data-theme="glass"] #modal{background:rgba(0,0,0,.3)}