diff --git a/packages/app/src/Element/Feed/Timeline.css b/packages/app/src/Element/Feed/Timeline.css index 1cab71ee..d083973d 100644 --- a/packages/app/src/Element/Feed/Timeline.css +++ b/packages/app/src/Element/Feed/Timeline.css @@ -11,8 +11,6 @@ .latest-notes-fixed { position: fixed; top: 50px; - left: 50%; - transform: translateX(-50%); width: auto; z-index: 42; opacity: 0.9; diff --git a/packages/app/src/Element/Feed/TimelineRenderer.tsx b/packages/app/src/Element/Feed/TimelineRenderer.tsx index a8edfe23..a62a2639 100644 --- a/packages/app/src/Element/Feed/TimelineRenderer.tsx +++ b/packages/app/src/Element/Feed/TimelineRenderer.tsx @@ -3,7 +3,7 @@ import ProfileImage from "@/Element/User/ProfileImage"; import { FormattedMessage } from "react-intl"; import Icon from "@/Icons/Icon"; import { NostrLink, TaggedNostrEvent } from "@snort/system"; -import { ReactNode, useState } from "react"; +import { ReactNode, useEffect, useRef, useState } from "react"; import { TimelineFragment } from "@/Element/Feed/TimelineFragment"; import { DisplayAs } from "@/Element/Feed/DisplayAsSelector"; import { SpotlightThreadModal } from "@/Element/Spotlight/SpotlightThreadModal"; @@ -24,9 +24,30 @@ export interface TimelineRendererProps { } export function TimelineRenderer(props: TimelineRendererProps) { + const containerRef = useRef(null); + const latestNotesFixedRef = useRef(null); const { ref, inView } = useInView(); const [modalThread, setModalThread] = useState(undefined); + const updateLatestNotesPosition = () => { + if (containerRef.current && latestNotesFixedRef.current) { + const parentRect = containerRef.current.getBoundingClientRect(); + const childWidth = latestNotesFixedRef.current.offsetWidth; + + const leftPosition = parentRect.left + (parentRect.width - childWidth) / 2; + latestNotesFixedRef.current.style.left = `${leftPosition}px`; + } + }; + + useEffect(() => { + updateLatestNotesPosition(); + window.addEventListener("resize", updateLatestNotesPosition); + + return () => { + window.removeEventListener("resize", updateLatestNotesPosition); + }; + }, [inView, props.latest]); + const renderNotes = () => { return props.frags.map(frag => ( +
{props.latest.length > 0 && ( <>
props.showLatest(false)} ref={ref}> @@ -68,6 +89,7 @@ export function TimelineRenderer(props: TimelineRendererProps) {
{!inView && (
props.showLatest(true)}> {props.latest.slice(0, 3).map(p => { @@ -99,6 +121,6 @@ export function TimelineRenderer(props: TimelineRendererProps) { onBack={() => setModalThread(undefined)} /> )} - +
); } diff --git a/packages/app/src/Element/Trending/ShortNote.tsx b/packages/app/src/Element/Trending/ShortNote.tsx index e2cd5173..aa30fc2b 100644 --- a/packages/app/src/Element/Trending/ShortNote.tsx +++ b/packages/app/src/Element/Trending/ShortNote.tsx @@ -10,7 +10,7 @@ export default function ShortNote({ event }: { event: TaggedNostrEvent }) { return (
- +
diff --git a/packages/app/src/Element/User/ProfileImage.tsx b/packages/app/src/Element/User/ProfileImage.tsx index 4781e869..b3cf8bdc 100644 --- a/packages/app/src/Element/User/ProfileImage.tsx +++ b/packages/app/src/Element/User/ProfileImage.tsx @@ -42,7 +42,7 @@ export default function ProfileImage({ onClick, showFollowDistance = true, icons, - showProfileCard = true, + showProfileCard = false, }: ProfileImageProps) { const user = useUserProfile(profile ? "" : pubkey) ?? profile; const [isHovering, setIsHovering] = useState(false);