fix z-index issue

This commit is contained in:
Ren Amamiya 2023-08-13 09:07:59 +07:00
parent 9e5f15e9d5
commit 4a0f2c9a67
7 changed files with 14 additions and 14 deletions

View File

@ -20,9 +20,9 @@ export function NoteKind_1({
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-6 flex items-start gap-3">
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<div className="relative z-20 flex-1">
<NoteContent content={content} />
<NoteActions id={event.event_id || event.id} pubkey={event.pubkey} />
</div>

View File

@ -16,9 +16,9 @@ export function NoteKind_1063({ event }: { event: LumeEvent }) {
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-6 flex items-start gap-3">
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<div className="relative z-20 flex-1">
{isImage(url) && (
<Image
src={url}

View File

@ -35,13 +35,13 @@ export function Repost({ event }: { event: LumeEvent }) {
<div className="h-min w-full px-3 py-1.5">
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="relative flex flex-col">
<div className="isolate flex flex-col -space-y-4 overflow-hidden">
<div className="isolate flex flex-col -space-y-4">
<RepostUser pubkey={event.pubkey} />
<User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
</div>
<div className="relative z-20 flex items-start gap-3">
<div className="flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<div className="relative z-20 flex-1">
<NoteContent content={data.content} />
<NoteActions id={repostID} pubkey={data.pubkey} />
</div>

View File

@ -27,9 +27,9 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
<div className="mb-5 flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} />
<div className="relative z-20 -mt-6 flex items-start gap-3">
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<div className="relative z-20 flex-1">
<NoteContent content={data.content} long={data.kind === 30023} />
<NoteActions id={data.event_id} pubkey={data.pubkey} root={root} />
</div>

View File

@ -24,9 +24,9 @@ export function NoteThread({
<div className="relative">{reply && <SubNote id={reply} root={root} />}</div>
<div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-6 flex items-start gap-3">
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<div className="relative z-20 flex-1">
<NoteContent content={content} />
<NoteActions id={event.event_id} pubkey={event.pubkey} />
</div>

View File

@ -9,9 +9,9 @@ export function NoteKindUnsupport({ event }: { event: LumeEvent }) {
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
<div className="flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-6 flex items-start gap-3">
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<div className="relative z-20 flex-1">
<div className="mt-3 flex w-full flex-col gap-2">
<div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2">
<span className="text-sm font-medium leading-none text-white/50">

View File

@ -18,7 +18,7 @@ export function RepostUser({ pubkey }: { pubkey: string }) {
src={user?.picture || user?.image || DEFAULT_AVATAR}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="relative z-20 inline-block h-6 w-6 rounded bg-white ring-1 ring-zinc-800"
className="relative z-20 inline-block h-6 w-6 rounded bg-white ring-1 ring-black"
/>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[18rem] truncate text-white/50">