diff --git a/src/components/ReplyNoteList/index.tsx b/src/components/ReplyNoteList/index.tsx index 617280c2..1e1e4182 100644 --- a/src/components/ReplyNoteList/index.tsx +++ b/src/components/ReplyNoteList/index.tsx @@ -26,6 +26,7 @@ export default function ReplyNoteList({ event, className }: { event: NEvent; cla const [highlightReplyId, setHighlightReplyId] = useState(undefined) const { updateNoteReplyCount } = useNoteStats() const replyRefs = useRef>({}) + const bottomRef = useRef(null) useEffect(() => { const handleEventPublished = (data: Event) => { @@ -145,15 +146,20 @@ export default function ReplyNoteList({ event, className }: { event: NEvent; cla }) if (evt.pubkey === pubkey) { setTimeout(() => { - highlightReply(evt.id) + if (bottomRef.current) { + bottomRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) + } + highlightReply(evt.id, false) }, 100) } } - const highlightReply = (eventId: string) => { - const ref = replyRefs.current[eventId] - if (ref) { - ref.scrollIntoView({ behavior: 'smooth', block: 'center' }) + const highlightReply = (eventId: string, scrollTo = true) => { + if (scrollTo) { + const ref = replyRefs.current[eventId] + if (ref) { + ref.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) + } } setHighlightReplyId(eventId) setTimeout(() => { @@ -188,6 +194,7 @@ export default function ReplyNoteList({ event, className }: { event: NEvent; cla {replies.length === 0 && !loading && !until && (
{t('no replies')}
)} +
) }