FlowyLabs/llink
1
0
Fork 0
Code Issues 71 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: longer markdown content hidden

Browse Source 
Added scroll to longer content and padding to avoid conflicting with
stream view peripheral controls and panels
This commit is contained in:
talksik
2026-04-12 10:12:06 -07:00
parent 2bc4ce7060
commit 484ee9d4fb
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/src/features/particles/stream-view.tsx
+1 -1
View File
@@ -431,7 +431,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
return ( return (
<div <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} onMouseMove={handleMouseActivity}
onMouseLeave={() => setShowControls(false)} onMouseLeave={() => setShowControls(false)}
> >
js/src/features/particles/text-particle-view.tsx
+15 -6
View File
@@ -104,7 +104,7 @@ const markdownComponents: React.ComponentProps<typeof ReactMarkdown>["components
function MarkdownContent({ content, className }: { content: string; className?: string }) { function MarkdownContent({ content, className }: { content: string; className?: string }) {
return ( return (
<div className={cn("break-words overflow-hidden", className)}> <div className={cn("break-words", className)}>
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeHighlight]} rehypePlugins={[rehypeHighlight]}
@@ -181,7 +181,7 @@ export function TextParticleView({
// Mode 1: bare URLs only — show link cards centered // Mode 1: bare URLs only — show link cards centered
if (linksOnly && !hasAttachments) { if (linksOnly && !hasAttachments) {
return ( 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} /> <LinkPreviews entries={linkPreviews} />
</div> </div>
); );
@@ -191,7 +191,7 @@ export function TextParticleView({
if (content.length < IMMERSIVE_CHAR_LIMIT && !hasEnrichments && !hasMarkdownFormatting(content)) { if (content.length < IMMERSIVE_CHAR_LIMIT && !hasEnrichments && !hasMarkdownFormatting(content)) {
const style = getImmersiveTextStyle(content.length); const style = getImmersiveTextStyle(content.length);
return ( 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 <p
className={cn( className={cn(
"max-w-2xl break-words text-center leading-relaxed text-white select-text cursor-text", "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 // Mode 3: card layout
return ( 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)]">
<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"> <div
<MarkdownContent content={content} className="break-words select-text cursor-text" /> 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} />} {hasLinks && <LinkPreviews entries={linkPreviews} />}