diff --git a/src/element/video-tile.css b/src/element/video-tile.css index 170c38c..6c8674b 100644 --- a/src/element/video-tile.css +++ b/src/element/video-tile.css @@ -1,4 +1,6 @@ -.video-tile {} +.video-tile { + position: relative; +} .video-tile.nsfw>div:nth-child(1) { filter: blur(3px); @@ -22,14 +24,16 @@ } .video-tile .pill-box { - float: right; margin: 16px 20px; text-transform: uppercase; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; - height: calc(100% - 32px); + position: absolute; + top: 0; + right: 0; + gap: 8px; } .video-tile .pill-box .pill { diff --git a/src/element/video-tile.tsx b/src/element/video-tile.tsx index fd86b48..b2c7184 100644 --- a/src/element/video-tile.tsx +++ b/src/element/video-tile.tsx @@ -42,11 +42,11 @@ export function VideoTile({ backgroundImage: `url(${inView ? ((image?.length ?? 0) > 0 ? image : ZapStream) : ""})`, }} > - - {showStatus && } - {viewers && {formatSats(Number(viewers))} viewers} - + + {showStatus && } + {viewers && {formatSats(Number(viewers))} viewers} +

{title}

{showAuthor &&
{inView && }
}