diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx
index a1d3024..5456e4f 100644
--- a/js/src/features/particles/stream-view.tsx
+++ b/js/src/features/particles/stream-view.tsx
@@ -431,7 +431,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
 
   return (
     <div
-      className="relative flex h-screen flex-col overflow-hidden bg-black text-white"
+      className="relative flex h-screen flex-col overflow-hidden bg-black text-white [--stream-safe-top:4rem] [--stream-safe-bottom:5rem]"
       onMouseMove={handleMouseActivity}
       onMouseLeave={() => setShowControls(false)}
     >
diff --git a/js/src/features/particles/text-particle-view.tsx b/js/src/features/particles/text-particle-view.tsx
index 5329bf1..c4854fe 100644
--- a/js/src/features/particles/text-particle-view.tsx
+++ b/js/src/features/particles/text-particle-view.tsx
@@ -104,7 +104,7 @@ const markdownComponents: React.ComponentProps<typeof ReactMarkdown>["components
 
 function MarkdownContent({ content, className }: { content: string; className?: string }) {
   return (
-    <div className={cn("break-words overflow-hidden", className)}>
+    <div className={cn("break-words", className)}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeHighlight]}
@@ -181,7 +181,7 @@ export function TextParticleView({
   // Mode 1: bare URLs only — show link cards centered
   if (linksOnly && !hasAttachments) {
     return (
-      <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
+      <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 px-8 pt-[var(--stream-safe-top,2rem)] pb-[var(--stream-safe-bottom,2rem)]">
         <LinkPreviews entries={linkPreviews} />
       </div>
     );
@@ -191,7 +191,7 @@ export function TextParticleView({
   if (content.length < IMMERSIVE_CHAR_LIMIT && !hasEnrichments && !hasMarkdownFormatting(content)) {
     const style = getImmersiveTextStyle(content.length);
     return (
-      <div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
+      <div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 px-8 pt-[var(--stream-safe-top,2rem)] pb-[var(--stream-safe-bottom,2rem)]">
         <p
           className={cn(
             "max-w-2xl break-words text-center leading-relaxed text-white select-text cursor-text",
@@ -207,9 +207,18 @@ export function TextParticleView({
 
   // Mode 3: card layout
   return (
-    <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
-      <div className="flex max-h-full w-full max-w-2xl flex-col gap-4 overflow-y-auto rounded-2xl bg-white/10 p-5 backdrop-blur-md">
-        <MarkdownContent content={content} className="break-words select-text cursor-text" />
+    <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 px-8 pt-[var(--stream-safe-top,2rem)] pb-[var(--stream-safe-bottom,2rem)]">
+      <div
+        className={cn(
+          "flex max-h-full w-full max-w-2xl flex-col gap-4 overflow-y-auto overscroll-contain rounded-2xl bg-white/10 p-6 backdrop-blur-md",
+          "[&::-webkit-scrollbar]:w-2",
+          "[&::-webkit-scrollbar-track]:bg-transparent",
+          "[&::-webkit-scrollbar-thumb]:rounded-full",
+          "[&::-webkit-scrollbar-thumb]:bg-white/30",
+          "[&::-webkit-scrollbar-thumb]:hover:bg-white/50",
+        )}
+      >
+        <MarkdownContent content={content} className="select-text cursor-text" />
 
         {hasLinks && <LinkPreviews entries={linkPreviews} />}