From fed72727ef7f19df2c202b27e5456a847143a36f Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Thu, 27 Jul 2023 16:45:24 +0100
Subject: [PATCH] Dont blur pills

---
 src/element/video-tile.css | 10 +++++++---
 src/element/video-tile.tsx |  8 ++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

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) : ""})`,
         }}
       >
-        <span className="pill-box">
-          {showStatus && <StatePill state={status as StreamState} />}
-          {viewers && <span className="pill viewers">{formatSats(Number(viewers))} viewers</span>}
-        </span>
       </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>