fix: stream preview tweaks

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 < 30) return "text-xl font-semibold";
-  if (length < 80) return "text-base font-medium";
+  if (length < 80) return "text-lg font-medium";
-  if (length < 200) return "text-sm font-normal";
+  if (length < 200) return "text-base font-normal";
-  return "text-xs 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",
+          "line-clamp-4 text-center leading-relaxed text-4xl",
-          getPreviewTextStyle(data.content.length),
         )}
       >
-        {data.content}
+        {truncated}
       </p>
     </div>
   );

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 */}