From 5026f6a00847453606fa010f4223a93674d686ed Mon Sep 17 00:00:00 2001
From: verbiricha <bandarra@protonmail.com>
Date: Tue, 1 Aug 2023 07:48:51 +0200
Subject: [PATCH] fix: show tags outside video tile

---
 src/element/video-tile.css | 20 +++++++++++-----
 src/element/video-tile.tsx | 48 ++++++++++++++++++++------------------
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/element/video-tile.css b/src/element/video-tile.css
index a47df95..6ac3108 100644
--- a/src/element/video-tile.css
+++ b/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;
 }
diff --git a/src/element/video-tile.tsx b/src/element/video-tile.tsx
index 6feaf1b..2f49bc3 100644
--- a/src/element/video-tile.tsx
+++ b/src/element/video-tile.tsx
@@ -38,33 +38,35 @@ export function VideoTile({
     ev.pubkey,
   );
   return (
-    <Link
-      to={`/${link}`}
-      className={`video-tile${contentWarning ? " nsfw" : ""}`}
-      ref={ref}
-    >
-      <div
-        style={{
-          position: "relative",
-          backgroundImage: `url(${
-            inView ? ((image?.length ?? 0) > 0 ? image : ZapStream) : ""
-          })`,
-        }}
+    <div className="video-tile-container">
+      <Link
+        to={`/${link}`}
+        className={`video-tile${contentWarning ? " nsfw" : ""}`}
+        ref={ref}
       >
+        <div
+          style={{
+            backgroundImage: `url(${
+              inView ? ((image?.length ?? 0) > 0 ? image : ZapStream) : ""
+            })`,
+          }}
+        ></div>
+        <span className="pill-box">
+          {showStatus && <StatePill state={status as StreamState} />}
+          {viewers && (
+            <span className="pill viewers">
+              {formatSats(Number(viewers))} viewers
+            </span>
+          )}
+        </span>
+        <h3>{title}</h3>
+      </Link>
+      <div className="video-tile-info">
         <div className="video-tags">
           <Tags ev={ev} max={3} />
         </div>
+        {showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}
       </div>
-      <span className="pill-box">
-        {showStatus && <StatePill state={status as StreamState} />}
-        {viewers && (
-          <span className="pill viewers">
-            {formatSats(Number(viewers))} viewers
-          </span>
-        )}
-      </span>
-      <h3>{title}</h3>
-      {showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}
-    </Link>
+    </div>
   );
 }