From cbace421d2cc7ff2367b6bc9e853d9f40e8f74b5 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 21 Mar 2026 12:07:25 -0700
Subject: [PATCH] fix: long subheadline overflowing listview

---
 js/src/features/particles/particle-list-view.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/js/src/features/particles/particle-list-view.tsx b/js/src/features/particles/particle-list-view.tsx
index 3f1a495..085c687 100644
--- a/js/src/features/particles/particle-list-view.tsx
+++ b/js/src/features/particles/particle-list-view.tsx
@@ -22,7 +22,6 @@ import {
 import { getInitials } from "@/lib/utils";
 import { formatDistanceToNow } from "@/lib/time-utils";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Progress } from "@/components/ui/progress";
 import { Small } from "@/components/ui/typography";
@@ -133,10 +132,12 @@ function StreamRow({
   const TypeIcon = latestChild ? getParticleTypeIcon(latestChild) : Radio;
 
   return (
-    <button
-      type="button"
+    <div
+      role="button"
+      tabIndex={0}
       onClick={onClick}
-      className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent"
+      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onClick(); }}
+      className="flex w-full items-center gap-3 px-4 py-3 text-left cursor-pointer transition-colors hover:bg-accent"
     >
       <Avatar
         className={cn(isUnseen && "ring-2 ring-primary")}
@@ -193,7 +194,7 @@ function StreamRow({
       {isUnseen && (
         <span className="size-2 shrink-0 rounded-full bg-primary" />
       )}
-    </button>
+    </div>
   );
 }
 
@@ -239,7 +240,7 @@ export function ParticleListView({ path }: ParticleListViewProps) {
   }
 
   return (
-    <ScrollArea className="h-full">
+    <div className="h-full overflow-clip">
       <div className="py-1">
         {streams.map((stream, index) => (
           <div key={stream.id}>
@@ -252,6 +253,6 @@ export function ParticleListView({ path }: ParticleListViewProps) {
           </div>
         ))}
       </div>
-    </ScrollArea>
+    </div>
   );
 }