diff --git a/components/social/comment/comment-report-modal.tsx b/components/social/comment/comment-report-modal.tsx index 64b05a3c..21c3e9df 100644 --- a/components/social/comment/comment-report-modal.tsx +++ b/components/social/comment/comment-report-modal.tsx @@ -63,7 +63,10 @@ export function ReportCommentModal({ } return ( -
+ // pointer-events-auto: the comments drawer is a modal vaul sheet (body + // gets pointer-events:none); without this the modal would be click-through + // and the click would fall to vaul's overlay and dismiss the drawer. +
!working && onClose()} diff --git a/components/social/post/post-card.tsx b/components/social/post/post-card.tsx index ba6a08d0..5d7cdba1 100644 --- a/components/social/post/post-card.tsx +++ b/components/social/post/post-card.tsx @@ -27,6 +27,7 @@ import type { Post } from "@/lib/social"; import { displaySourceLabel } from "@/lib/source-reference"; import { appendHighlight, hasHighlight } from "@/lib/text-highlight"; import { UserAvatar } from "@/components/ui/user-avatar"; +import { timeAgo } from "@/lib/time"; import { PostActionsFooter } from "./post-actions-footer"; import { PostCardMenu } from "./post-card-menu"; @@ -88,11 +89,10 @@ export function PostCard({ {authorName}

)} - {authorHandle ? ( -

- @{authorHandle} -

- ) : null} +

+ {authorHandle ? <>@{authorHandle} · : null} + {timeAgo(post.created_at)} +

diff --git a/components/ui/confirm-modal.tsx b/components/ui/confirm-modal.tsx index a0b74deb..5f24d973 100644 --- a/components/ui/confirm-modal.tsx +++ b/components/ui/confirm-modal.tsx @@ -104,8 +104,12 @@ export function ConfirmModal({ return createPortal( <> + {/* pointer-events-auto: when this modal is opened from inside a modal + vaul drawer (body gets pointer-events:none), the overlay/dialog would + otherwise be click-through — the click would fall to vaul's overlay + beneath and dismiss the drawer instead of hitting these controls. */}
!working && onClose()} aria-hidden /> @@ -114,7 +118,7 @@ export function ConfirmModal({ aria-modal="true" aria-labelledby="confirm-modal-title" aria-describedby={message ? "confirm-modal-message" : undefined} - className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4" + className="pointer-events-auto fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4" >