From 03ec264c93a9a74e77fd1316abbe023d667ec64e Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sat, 13 Jun 2026 11:18:09 -0700
Subject: [PATCH] fix awkward stream list experience

---
 js/desktop/src/components/ui/scroll-area.tsx          |  2 +-
 .../src/features/particles/stream-list-sidebar.tsx    |  9 ++++-----
 js/desktop/src/hooks/use-stream-view-mode.ts          | 11 +----------
 3 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/js/desktop/src/components/ui/scroll-area.tsx b/js/desktop/src/components/ui/scroll-area.tsx
index b17197b..611a5ce 100644
--- a/js/desktop/src/components/ui/scroll-area.tsx
+++ b/js/desktop/src/components/ui/scroll-area.tsx
@@ -16,7 +16,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
diff --git a/js/desktop/src/features/particles/stream-list-sidebar.tsx b/js/desktop/src/features/particles/stream-list-sidebar.tsx
index e8a0d5e..f7b8239 100644
--- a/js/desktop/src/features/particles/stream-list-sidebar.tsx
+++ b/js/desktop/src/features/particles/stream-list-sidebar.tsx
@@ -41,13 +41,12 @@ export function StreamListSidebar({
   }, [currentIndex]);
 
   return (
-    <aside className="dark flex w-96 shrink-0 flex-col border-l border-white/10 bg-zinc-950">
+    <aside className="dark flex max-w-60 shrink-0 flex-col border-l border-white/10 bg-zinc-950">
       <div className="flex shrink-0 items-center gap-2 border-b border-white/10 px-4 py-3">
         <List className="size-3.5 text-white/40" />
-        <span className="truncate text-sm font-medium text-white/90">
-          {streamName}
+        <span className="truncate text-sm font-medium text-white/90 mr-auto">
+          {items.length} messages
         </span>
-        <span className="ml-auto text-xs text-white/40">{items.length}</span>
         <KeyHint
           keys="L"
           onClick={onToggle}
@@ -144,7 +143,7 @@ function ChatRowContent({ particle }: { particle: Particle }) {
   switch (particle.type) {
     case 'text':
       return (
-        <p className="line-clamp-3 text-xs leading-relaxed whitespace-pre-line text-white/70">
+        <p className="line-clamp-2 text-xs leading-relaxed whitespace-pre-line text-white/70">
           {particle.properties.content}
         </p>
       );
diff --git a/js/desktop/src/hooks/use-stream-view-mode.ts b/js/desktop/src/hooks/use-stream-view-mode.ts
index 0ed642b..3268f12 100644
--- a/js/desktop/src/hooks/use-stream-view-mode.ts
+++ b/js/desktop/src/hooks/use-stream-view-mode.ts
@@ -14,20 +14,11 @@ function decideMode(
   return caughtUp ? 'list' : 'player';
 }
 
-/**
- * Which mode a stream opens in: the player (autoplay catch-up) when there's
- * unseen content, the browsable list when the user is fully caught up.
- * Decided once on entry from the playback marker vs. the stream's last
- * activity — browsing afterwards advances the marker, but the mode only
- * changes via the user's toggle.
- */
 export function useStreamViewMode(
   streamParticle: Particle & { type: 'stream' },
   userId: string | undefined,
 ): { mode: StreamViewMode; toggle: () => void } {
-  const [mode, setMode] = useState<StreamViewMode>(() =>
-    decideMode(streamParticle, userId),
-  );
+  const [mode, setMode] = useState<StreamViewMode>('player');
 
   // Re-decide when navigating between streams without an unmount.
   const [prevStreamId, setPrevStreamId] = useState(streamParticle.id);