Improve quote video badge

public/style.css

@@ -659,14 +659,16 @@ video {
 }
 
 .quote-badge {
-    background: rgba(0,0,0,0.25);
-    border-radius: 4px;
-    bottom: 8px;
-    box-sizing: border-box;
-    color: #fffffff0;
-    left: 8px;
+    left: 0px;
     position: absolute;
     z-index: 1;
-    line-height: 16px;
-    padding: 2px;
+    align-self: flex-end;
+}
+
+.quote-badge-text {
+    margin: 4px;
+    background: rgba(0, 0, 0, 0.66);
+    border-radius: 4px;
+    color: #fffffff0;
+    padding: 0px 2px;
 }

src/views/tweet.nim

@@ -39,7 +39,9 @@
       <div class="quote-media">
         <img src=${quote.thumb.get().getSigUrl("pic")}>
         #if quote.badge.isSome:
-        <div class="quote-badge">${quote.badge.get()}</div>
+        <div class="quote-badge">
+          <div class="quote-badge-text">${quote.badge.get()}</div>
+        </div>
         #end if
       </div>
     </div>