feat: scroll fixes, z-index

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