feat: scroll fixes, z-index

packages/app/src/pages/session.tsx

@@ -574,7 +574,7 @@ export default function Page() {
         const sessionID = params.id
         if (!sessionID) return
         if (status()?.type !== "idle") {
-          await sdk.client.session.abort({ sessionID }).catch(() => {})
+          await sdk.client.session.abort({ sessionID }).catch(() => { })
         }
         const revert = info()?.revert?.messageID
         // Find the last user message that's not already reverted
@@ -1103,7 +1103,7 @@ export default function Page() {
                   >
                     <div class="relative w-full h-full min-w-0">
                       <Show when={isDesktop()}>
-                        <div class="absolute inset-0 pointer-events-none z-10">
+                        <div class="absolute inset-0 pointer-events-none z-50">
                           <SessionMessageRail
                             messages={visibleUserMessages()}
                             current={activeMessage()}

packages/ui/src/components/dialog.css

@@ -110,6 +110,7 @@
         flex-direction: column;
         flex: 1;
         overflow-y: auto;
+        padding-bottom: 12px;
 
         &:focus-visible {
           outline: none;

packages/ui/src/components/list.css

@@ -19,7 +19,7 @@
 [data-component="list"] {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
   overflow: hidden;
   padding: 0 12px;
 
@@ -79,12 +79,9 @@
     gap: 12px;
     overflow-y: auto;
     overscroll-behavior: contain;
-    mask: linear-gradient(to bottom, #ffff calc(100% - var(--bottom-fade)), #0000);
-    animation: scroll;
-    animation-timeline: --scroll;
-    scroll-timeline: --scroll y;
     scrollbar-width: none;
     -ms-overflow-style: none;
+
     &::-webkit-scrollbar {
       display: none;
     }

packages/ui/src/components/list.tsx

@@ -3,6 +3,7 @@ import { createEffect, createSignal, For, onCleanup, type JSX, on, Show } from "
 import { createStore } from "solid-js/store"
 import { Icon, type IconProps } from "./icon"
 import { IconButton } from "./icon-button"
+import { ScrollFade } from "./scroll-fade"
 import { TextField } from "./text-field"
 
 export interface ListSearchProps {
@@ -169,7 +170,13 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
           </Show>
         </div>
       </Show>
-      <div ref={setScrollRef} data-slot="list-scroll">
+      <ScrollFade
+        ref={setScrollRef}
+        direction="vertical"
+        fadeStartSize={0}
+        fadeEndSize={20}
+        data-slot="list-scroll"
+      >
         <Show
           when={flat().length > 0}
           fallback={
@@ -226,7 +233,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
             )}
           </For>
         </Show>
-      </div>
+      </ScrollFade>
     </div>
   )
 }