fix(mobile): the list fades out under the floating search bar (#1039)

Rows scrolled under the floating bar showed through sharp and cut in
half in the gap beneath it. A scroll-edge fade from the bar down to the
screen's edge softens them into the canvas, as the system's own bars do.

Claude-Session: https://claude.ai/code/session_01HVosmYyVSH3BrsLYx3tcSS
This commit is contained in:
l0ng-ai
2026-09-30 15:28:22 +08:00
committed by GitHub
parent ed87bd39b6
commit 0701278fe9
+18
View File
@@ -1558,6 +1558,24 @@ html.scanning #app {
gap: 10px;
}
/* The list softens into the canvas as it runs under the floating bar, as the
system's own bars do, so no row shows through sharp and cut in half. */
.screen:has(> .float-bar)::after {
content: "";
position: absolute;
z-index: 2;
right: 0;
bottom: 0;
left: 0;
height: calc(88px + var(--safe-bottom));
background: linear-gradient(to bottom, transparent, var(--canvas) 55%);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
mask-image: linear-gradient(to bottom, transparent, #000 40%);
pointer-events: none;
}
.search {
flex: 1;
min-width: 0;