rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Shadow the feed list on a phone only while it is open (#151)

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-09 01:09:36 +00:00
parent a553931c76
commit a12aa59970
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/app.css
View File

@@ -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)}