src/components/MinnectMedia.tsx

@@ -66,6 +66,9 @@ 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}
+      </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">
@@ -73,9 +76,10 @@ export function MinnectMedia({ media, thumbnailUrl, question, who, pictureUrl, v
               </svg>
               {views.toLocaleString("en-US")} {views === 1 ? "view" : "views"}
             </span>
-        ) : null}
+          ) : <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}

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 {
+.trend-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
-  position: absolute;
+.trend-views { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
-  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-views svg { width: 15px; height: 15px; }
-.trend-kind {
+.trend-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
-  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;
-}
 /* 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-play { opacity: 0; visibility: hidden; }
-.trend-media-playing .trend-views,
-.trend-media-playing .trend-kind { 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; }