From 961b25e84ad7a3f7a90ddce18bd46acbc4f34509 Mon Sep 17 00:00:00 2001
From: Cesar Alcazar <calcazar@dasnuve.com>
Date: Tue, 20 Oct 2026 08:03:05 -0600
Subject: [PATCH] 8iz120vqu: Move the views and kind labels into a meta row
 below the media

---
 src/components/MinnectMedia.tsx | 22 +++++++++++---------
 src/styles/trending.css         | 36 ++++-----------------------------
 2 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/src/components/MinnectMedia.tsx b/src/components/MinnectMedia.tsx
index 892b8b0..4cb5494 100644
--- a/src/components/MinnectMedia.tsx
+++ b/src/components/MinnectMedia.tsx
@@ -66,16 +66,20 @@ export function MinnectMedia({ media, thumbnailUrl, question, who, pictureUrl, v
             <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z" /></svg>
           </button>
         ) : null}
-        {views !== null ? (
-          <span className="trend-views">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-              <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" />
-            </svg>
-            {views.toLocaleString("en-US")} {views === 1 ? "view" : "views"}
-          </span>
-        ) : null}
-        {playable ? <span className="trend-kind">{isVideo ? "Video" : "Audio"}</span> : null}
       </div>
+      {views !== null || playable ? (
+        <div className="trend-meta">
+          {views !== null ? (
+            <span className="trend-views">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" />
+              </svg>
+              {views.toLocaleString("en-US")} {views === 1 ? "view" : "views"}
+            </span>
+          ) : <span />}
+          {playable ? <span className="trend-kind">{isVideo ? "Video" : "Audio"}</span> : null}
+        </div>
+      ) : null}
       {isAudio ? (
         <audio ref={audio} className="minnect-audio" controls preload="none" src={media.url} aria-label={`Play answer from ${who}`} />
       ) : null}
diff --git a/src/styles/trending.css b/src/styles/trending.css
index d81eb53..ef2b7fc 100644
--- a/src/styles/trending.css
+++ b/src/styles/trending.css
@@ -78,39 +78,14 @@
 .trend-play svg { width: 18px; height: 18px; margin-left: 2px; }
 .trend-play:hover { transform: scale(1.1); background: color-mix(in srgb, var(--on-accent) calc(100% - 72%), transparent); }
 .trend-play:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; }
-.trend-views {
-  position: absolute;
-  left: 12px;
-  bottom: 10px;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--on-accent);
-  pointer-events: none;
-}
+.trend-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.trend-views { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
 .trend-views svg { width: 15px; height: 15px; }
-.trend-kind {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-  z-index: 2;
-  font-size: 10.5px;
-  font-weight: 800;
-  letter-spacing: .14em;
-  text-transform: uppercase;
-  color: var(--on-accent);
-  opacity: .85;
-  pointer-events: none;
-}
+.trend-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
 /* While a video plays its own controls take over the frame. */
 .trend-media-playing .trend-scrim,
 .trend-media-playing .trend-who,
-.trend-media-playing .trend-play,
-.trend-media-playing .trend-views,
-.trend-media-playing .trend-kind { opacity: 0; visibility: hidden; }
+.trend-media-playing .trend-play { opacity: 0; visibility: hidden; }
 
 .trend-q {
   margin: 0;
@@ -126,6 +101,3 @@
 .minnect-audio { width: 100%; height: 36px; }
 
 .rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
-/* A video keeps its native control bar, so the labels ride above it. */
-.trend-media:has(video) .trend-views,
-.trend-media:has(video) .trend-kind { bottom: 46px; }