Dont blur pills

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 {

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>