scroll

bun.lock

@@ -6,8 +6,8 @@
       "dependencies": {
         "bun-plugin-svelte": "^0.0.6",
         "bun-plugin-tailwind": "^0.0.15",
-        "svelte": "^5.25.6",
+        "svelte": "^5.25.7",
-        "tailwindcss": "^4.1.2",
+        "tailwindcss": "^4.1.3",
       },
       "devDependencies": {
         "@types/bun": "latest",

src/components/progress-table.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { cubicInOut } from 'svelte/easing';
   import { fetchEntries, formatter } from '../util';
 
   let entriesPromise = $state(fetchEntries());
 
   let interval: Parameters<typeof clearInterval>[0] = undefined;
+
+  let scrolled = $state(false);
+  let container: HTMLDivElement;
+
   $effect(() => {
     clearInterval(interval);
 
@@ -29,7 +35,15 @@
 </script>
 
 <div
+  bind:this={container}
   class="relative col-[content] max-h-[calc(var(--main-min-height)---spacing(8))] overflow-y-auto pr-0.5"
+  onscroll={(e) => {
+    const scrollTop = container.scrollTop;
+    const scrollHeight = container.scrollHeight;
+    const clientHeight = container.clientHeight;
+
+    scrolled = scrollTop > 32;
+  }}
 >
   {#await entriesPromise}
     <p class="text-center">Loading entries...</p>
@@ -61,14 +75,23 @@
       <div class="hidden px-1 @3xl:block">done</div>
       <div class="hidden px-1 @5xl:block">created</div>
       <div class="hidden px-1 @xl:block">updated</div>
+
+      {#if scrolled}
+        <div
+          in:fade={{ duration: 500, easing: cubicInOut }}
+          out:fade={{ duration: 250, easing: cubicInOut }}
+          class="absolute inset-x-0 top-full h-16 bg-gradient-to-b from-gray-950 to-transparent"
+        ></div>
+      {/if}
     </div>
     {#each entries as entry (entry.id)}
       <div class="col-span-5 grid grid-cols-[subgrid] gap-1">
         <div class="py-2 text-xs text-gray-400/50">{entry.id}</div>
         <a
           href={entry.href}
-          class="block px-2 py-1 text-gray-200 capitalize transition-colors hover:text-pink-600 hover:underline"
+          class="line-clamp-1 block px-2 py-1 text-nowrap text-ellipsis text-gray-200 capitalize transition-colors hover:text-pink-600 hover:underline"
           target="_blank"
+          title={entry.name}
           referrerpolicy="no-referrer">{entry.name}</a
         >
         {@render done(entry.finished)}

tsconfig.json

@@ -24,6 +24,5 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
-  },
+  }
-  "exclude": ["node_modules", "dist", "build", "out", "coverage"]
 }