Make the invoice queue's scrollability discoverable on macOS

macOS hides overlay scrollbars by default, so the 11-row queue looked complete
when ~2 rows (including the quantity-mismatch edge case) were below the fold and
undiscoverable. Add two cues: a bottom fade-out gradient ("more below", purely
visual / pointer-events-none so it never blocks row clicks) and an
always-visible slim scrollbar (scrollbar-width + ::-webkit-scrollbar). Verified
by screenshot at top and scrolled positions; e2e 3/3 and all gates green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: DylanMerigaud

app/globals.css

@@ -26,6 +26,29 @@ body {
   .ring-line {
     box-shadow: inset 0 0 0 1px theme("colors.line");
   }
+
+  /* Always-visible slim scrollbar. macOS hides overlay scrollbars by default,
+     so a long list looks deceptively complete — this keeps a discreet track
+     visible (paired with a bottom fade) so it's obvious the list scrolls. */
+  .scrollbar-slim {
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: #d1d5db transparent;
+  }
+  .scrollbar-slim::-webkit-scrollbar {
+    width: 8px;
+  }
+  .scrollbar-slim::-webkit-scrollbar-thumb {
+    background-color: #d1d5db;
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  .scrollbar-slim::-webkit-scrollbar-thumb:hover {
+    background-color: #9ca3af;
+  }
+  .scrollbar-slim::-webkit-scrollbar-track {
+    background: transparent;
+  }
 }
 
 /* The trace timeline streams in step-by-step; fade each new step in so the

components/dashboard.tsx

@@ -42,7 +42,11 @@ export function Dashboard({ queue }: { queue: QueueItem[] }) {
           <CardTitle>Invoice queue</CardTitle>
           <span className="text-[11px] text-muted tnum">{queue.length} invoices</span>
         </CardHeader>
-        <ul className="min-h-0 flex-1 divide-y divide-line overflow-y-auto">
+        {/* relative wrapper so the bottom fade can overlay the scroll area —
+            on macOS the overlay scrollbar is hidden, so the fade is the cue that
+            the list continues below. */}
+        <div className="relative min-h-0 flex-1">
+          <ul className="scrollbar-slim h-full divide-y divide-line overflow-y-auto">
           {queue.map((item) => {
             const isSelected = item.id === selectedId;
             // The pill reflects the live run only for the selected row; others
@@ -93,7 +97,13 @@ export function Dashboard({ queue }: { queue: QueueItem[] }) {
               </li>
             );
           })}
-        </ul>
+          </ul>
+          {/* "more below" fade — purely visual, never blocks row clicks. */}
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-surface to-transparent"
+          />
+        </div>
       </Card>
 
       {/* RIGHT — trace */}