mirror of
https://github.com/l0ng-ai/tty7.git
synced 2026-10-03 00:01:55 +00:00
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user