fix: show tags outside video tile

src/element/video-tile.css

@@ -2,6 +2,17 @@
   position: relative;
 }
 
+.video-tile-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.video-tile-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
 .video-tile.nsfw > div:nth-child(1) {
   filter: blur(3px);
 }
@@ -18,7 +29,7 @@
 .video-tile h3 {
   font-size: 20px;
   line-height: 25px;
-  margin: 16px 0;
+  margin: 16px 0 6px 0;
   word-break: break-all;
   word-wrap: break-word;
 }
@@ -44,16 +55,13 @@
   text-transform: lowercase;
 }
 
-.video-tile .video-tags {
+.video-tags {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 4px;
-  position: absolute;
-  bottom: 4px;
-  left: 4px;
 }
 
-.video-tile .video-tags .pill {
+.video-tags .pill {
   font-size: 12px;
 }

src/element/video-tile.tsx

@@ -38,6 +38,7 @@ export function VideoTile({
     ev.pubkey,
   );
   return (
+    <div className="video-tile-container">
       <Link
         to={`/${link}`}
         className={`video-tile${contentWarning ? " nsfw" : ""}`}
@@ -45,16 +46,11 @@ export function VideoTile({
       >
         <div
           style={{
-          position: "relative",
             backgroundImage: `url(${
               inView ? ((image?.length ?? 0) > 0 ? image : ZapStream) : ""
             })`,
           }}
-      >
+        ></div>
-        <div className="video-tags">
-          <Tags ev={ev} max={3} />
-        </div>
-      </div>
         <span className="pill-box">
           {showStatus && <StatePill state={status as StreamState} />}
           {viewers && (
@@ -64,7 +60,13 @@ export function VideoTile({
           )}
         </span>
         <h3>{title}</h3>
-      {showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}
       </Link>
+      <div className="video-tile-info">
+        <div className="video-tags">
+          <Tags ev={ev} max={3} />
+        </div>
+        {showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}
+      </div>
+    </div>
   );
 }