From 5ff73a173f4ce437027fae5cb77c07a6bd2e34db Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 21 Feb 2026 13:31:01 -0800
Subject: [PATCH] fix: stream preview tweaks

---
 js/src/features/streams/particle-preview.tsx | 17 +++++++++--------
 js/src/features/streams/stream-list.tsx      |  2 +-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/js/src/features/streams/particle-preview.tsx b/js/src/features/streams/particle-preview.tsx
index 62a5b07..349bc74 100644
--- a/js/src/features/streams/particle-preview.tsx
+++ b/js/src/features/streams/particle-preview.tsx
@@ -19,10 +19,10 @@ interface ParticlePreviewProps {
 
 /** Dynamic text sizing for card previews — inspired by TextParticleView. */
 function getPreviewTextStyle(length: number) {
-  if (length < 30) return "text-lg font-semibold";
-  if (length < 80) return "text-base font-medium";
-  if (length < 200) return "text-sm font-normal";
-  return "text-xs font-normal";
+  if (length < 30) return "text-xl font-semibold";
+  if (length < 80) return "text-lg font-medium";
+  if (length < 200) return "text-base font-normal";
+  return "text-sm font-normal";
 }
 
 export function ParticlePreview({ particle }: ParticlePreviewProps) {
@@ -46,15 +46,16 @@ export function ParticlePreview({ particle }: ParticlePreviewProps) {
 
 function TextPreview({ particle }: { particle: StreamParticle }) {
   const data = getParticleData(particle, "text");
+  // only show x first chars for preview, to avoid overflow and also to determine text size
+  const truncated = data.content.length > 30 ? data.content.slice(0, 30) + "..." : data.content;
   return (
-    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-violet-500/15 to-indigo-500/15 p-4">
+    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-black-500/15 to-indigo-500/15 p-4">
       <p
         className={cn(
-          "line-clamp-4 text-center leading-relaxed",
-          getPreviewTextStyle(data.content.length),
+          "line-clamp-4 text-center leading-relaxed text-4xl",
         )}
       >
-        {data.content}
+        {truncated}
       </p>
     </div>
   );
diff --git a/js/src/features/streams/stream-list.tsx b/js/src/features/streams/stream-list.tsx
index d87cd23..0124621 100644
--- a/js/src/features/streams/stream-list.tsx
+++ b/js/src/features/streams/stream-list.tsx
@@ -43,7 +43,7 @@ export function StreamList() {
           <Card
             key={stream.id}
             size="sm"
-            className="hover:bg-accent/50 cursor-pointer overflow-hidden transition-colors"
+            className="hover:bg-accent/50 cursor-pointer overflow-hidden transition-colors pt-0!"
             onClick={() => navigate(`/streams/${stream.id}`)}
           >
             {/* Preview hero area */}