Mirror/vega
1
0
Fork 0
mirror of https://github.com/hoornet/vega.git synced 2026-05-14 23:48:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix thread indentation compounding on narrow screens

Browse Source 
Replace absolute marginLeft with relative Tailwind ml-4, cap indent
depth at 3. Deep replies get border-line only, no further indent.
This commit is contained in:
Jure
2026-04-06 15:21:37 +02:00
parent 77d672b6d1
commit 86b7705c07
2 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-tauri/Cargo.lock generated
View File

@@ -5320,7 +5320,7 @@ checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426"
[[package]] [[package]]
name = "vega" name = "vega"
version = "0.12.2" version = "0.12.3"
dependencies = [ dependencies = [
"futures-util", "futures-util",
"hex", "hex",

18
src/components/thread/ThreadNode.tsx
View File

@@ -18,7 +18,7 @@ interface ThreadNodeProps {
} }
const MAX_VISIBLE_CHILDREN = 3; const MAX_VISIBLE_CHILDREN = 3;
const MAX_INDENT_DEPTH = 4; const MAX_INDENT_DEPTH = 3;
function InlineThreadReply({ replyTo, rootEvent, onPublished }: { function InlineThreadReply({ replyTo, rootEvent, onPublished }: {
replyTo: NDKEvent; replyTo: NDKEvent;
@@ -133,13 +133,13 @@ export function ThreadNodeComponent({ node, rootEvent, onReplyPublished, focused
const shownChildren = shouldCollapse ? visibleChildren.slice(0, 2) : visibleChildren; const shownChildren = shouldCollapse ? visibleChildren.slice(0, 2) : visibleChildren;
const remainingCount = visibleChildren.length - shownChildren.length; const remainingCount = visibleChildren.length - shownChildren.length;
const indent = Math.min(node.depth, MAX_INDENT_DEPTH); // Use relative indent: each level adds one step, but only up to MAX_INDENT_DEPTH
const shouldIndent = node.depth > 0 && node.depth <= MAX_INDENT_DEPTH;
const isFocused = node.event.id === focusedId; const isFocused = node.event.id === focusedId;
return ( return (
<div <div
className={indent > 0 ? "border-l-2 border-border" : ""} className={shouldIndent ? "border-l-2 border-border ml-4 pl-1" : node.depth > MAX_INDENT_DEPTH ? "border-l-2 border-border pl-1" : ""}
style={indent > 0 ? { marginLeft: `${indent * 16}px` } : undefined}
> >
<NoteCard <NoteCard
event={node.event} event={node.event}
@@ -148,7 +148,7 @@ export function ThreadNodeComponent({ node, rootEvent, onReplyPublished, focused
/> />
{showReplyBox && ( {showReplyBox && (
<div style={indent > 0 ? { marginLeft: "16px" } : undefined}> <div className={shouldIndent ? "ml-2" : ""}>
<InlineThreadReply <InlineThreadReply
replyTo={node.event} replyTo={node.event}
rootEvent={rootEvent} rootEvent={rootEvent}
@@ -175,18 +175,14 @@ export function ThreadNodeComponent({ node, rootEvent, onReplyPublished, focused
{remainingCount > 0 && ( {remainingCount > 0 && (
<button <button
onClick={() => setExpanded(true)} onClick={() => setExpanded(true)}
className="text-accent hover:text-accent-hover text-[11px] py-1.5 transition-colors" className="text-accent hover:text-accent-hover text-[11px] py-1.5 ml-4 transition-colors"
style={{ marginLeft: `${(indent + 1) * 16}px` }}
> >
show {remainingCount} more {remainingCount === 1 ? "reply" : "replies"} show {remainingCount} more {remainingCount === 1 ? "reply" : "replies"}
</button> </button>
)} )}
{hiddenCount > 0 && ( {hiddenCount > 0 && (
<div <div className="text-text-dim text-[10px] py-1 ml-4 italic">
className="text-text-dim text-[10px] py-1 italic"
style={{ marginLeft: `${(indent + 1) * 16}px` }}
>
{hiddenCount} {hiddenCount === 1 ? "reply" : "replies"} hidden (muted) {hiddenCount} {hiddenCount === 1 ? "reply" : "replies"} hidden (muted)
</div> </div>
)} )}