Fix description text clipping in video cards

Card wrapper overflow-hidden was clipping description text at the card boundary. Move overflow-hidden + rounding to the thumbnail only so the card body text has room to render fully. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add view count and description snippet to grid video cards
2026-05-26 12:03:56 +02:00 · 2026-05-26 12:02:50 +02:00 · 2026-05-26 12:01:43 +02:00
2 changed files with 76 additions and 35 deletions
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -29,7 +29,10 @@ function BottomNav({ newCount }) {
  ];

  return (
-    <nav className="sm:hidden fixed bottom-0 inset-x-0 z-50 bg-zinc-950/95 backdrop-blur border-t border-zinc-800">
+    <nav
+      className="sm:hidden fixed bottom-0 inset-x-0 z-50 bg-zinc-950/98 backdrop-blur border-t border-zinc-800"
+      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+    >
      <div className="flex items-stretch h-16">
        {tabs.map((tab) => (
          <NavLink
@@ -37,22 +40,31 @@ function BottomNav({ newCount }) {
            to={tab.to}
            end={tab.end}
            className={({ isActive }) =>
-              `relative flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors ${
+              `relative flex-1 flex flex-col items-center justify-center gap-1 transition-colors ${
                isActive ? "text-accent" : "text-zinc-500"
              }`
            }
          >
-            <div className="relative">
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                {tab.icon}
-              </svg>
-              {tab.badge > 0 && (
-                <span className="absolute -top-1 -right-1.5 min-w-[14px] h-3.5 bg-accent text-black text-[9px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
-                  {tab.badge > 99 ? "99+" : tab.badge}
+            {({ isActive }) => (
+              <>
+                <div className="relative">
+                  {isActive && (
+                    <span className="absolute -inset-2 rounded-xl bg-accent/10" />
+                  )}
+                  <svg className="w-5 h-5 relative" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    {tab.icon}
+                  </svg>
+                  {tab.badge > 0 && (
+                    <span className="absolute -top-1 -right-1.5 min-w-[14px] h-3.5 bg-accent text-black text-[9px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
+                      {tab.badge > 99 ? "99+" : tab.badge}
+                    </span>
+                  )}
+                </div>
+                <span className={`text-[10px] font-medium leading-none ${isActive ? "font-semibold" : ""}`}>
+                  {tab.label}
                </span>
-              )}
-            </div>
-            <span className="text-[10px] font-medium leading-none">{tab.label}</span>
+              </>
+            )}
          </NavLink>
        ))}
      </div>
@@ -257,7 +269,7 @@ export default function Layout() {
      </header>

      {/* Page content */}
-      <main className="flex-1 max-w-screen-xl mx-auto w-full px-4 py-6 pb-24 sm:pb-6">
+      <main className="flex-1 max-w-screen-xl mx-auto w-full px-4 py-6 pb-28 sm:pb-6" style={{ paddingBottom: "calc(7rem + env(safe-area-inset-bottom, 0px))" }}>
        <Outlet />
      </main>

--- a/frontend/src/components/VideoCard.jsx
+++ b/frontend/src/components/VideoCard.jsx
@@ -19,6 +19,14 @@ function formatDate(dateStr) {
  return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }

+function formatViews(n) {
+  if (!n) return null;
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B views`;
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n >= 100_000_000 ? 0 : 1)}M views`;
+  if (n >= 1_000) return `${Math.round(n / 1_000)}K views`;
+  return `${n} views`;
+}
+
 function IconBtn({ onClick, title, active, pending, children }) {
  return (
    <button
@@ -306,11 +314,14 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
  }

  // ── Grid variant ─────────────────────────────────────────────────────────
+  const avatarUrl = channelMeta?.thumbnail_url ?? null;
+  const avatarLetter = video.channel_name?.[0]?.toUpperCase() ?? "?";
+
  return (
    <div
      onClick={() => navigate(`/watch/${video.youtube_video_id}`)}
      className={clsx(
-        "group relative flex flex-col cursor-pointer rounded-2xl overflow-hidden",
+        "group relative flex flex-col cursor-pointer rounded-2xl",
        "bg-zinc-900 hover:bg-zinc-800/80 transition-colors duration-150",
        size === "sm" && "text-xs",
      )}
@@ -321,19 +332,29 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
        duration={duration}
        calmMode={calmMode}
        onDismiss={() => dismissMut.mutate()}
-        className="aspect-video"
+        className="aspect-video rounded-t-2xl overflow-hidden"
      />

-      <div className="flex flex-col gap-2 p-3 flex-1">
-        {/* Title */}
-        <p className="font-medium text-[13px] leading-snug text-zinc-50 line-clamp-2">
-          {video.title}
-        </p>
+      <div className="flex gap-2.5 p-3 flex-1">
+        {/* Channel avatar */}
+        <div className="shrink-0 mt-0.5" onClick={(e) => { e.stopPropagation(); navigate(`/channels/${video.channel_id}`); }}>
+          {avatarUrl ? (
+            <img src={avatarUrl} alt="" className="w-8 h-8 rounded-full object-cover hover:ring-2 hover:ring-accent/50 transition-all" />
+          ) : (
+            <div className="w-8 h-8 rounded-full bg-zinc-700 flex items-center justify-center text-xs font-bold text-zinc-400 hover:ring-2 hover:ring-accent/50 transition-all">
+              {avatarLetter}
+            </div>
+          )}
+        </div>

-        {/* Channel + date */}
-        <div className="flex items-center justify-between gap-2">
-          <span className="text-[11px] text-zinc-500 truncate">{video.channel_name}</span>
-          <div className="flex items-center gap-1.5 shrink-0">
+        {/* Text + actions */}
+        <div className="flex flex-col gap-1 min-w-0 flex-1">
+          <p className="font-medium text-[13px] leading-snug text-zinc-50 line-clamp-2">
+            {video.title}
+          </p>
+
+          <div className="flex items-center gap-1.5 flex-wrap">
+            <span className="text-[11px] text-zinc-500 truncate">{video.channel_name}</span>
            {channelNote && (
              <span title={channelNote} className="text-zinc-700 hover:text-zinc-400 transition-colors cursor-default">
                <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 24 24">
@@ -344,20 +365,28 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr
            {isDormant && !calmMode && (
              <span title="No uploads in 6+ months" className="text-[9px] text-zinc-700 tracking-widest">zzz</span>
            )}
-            {date && <span className="text-[11px] text-zinc-700">{date}</span>}
+            {video.is_recommended && !calmMode && (
+              <span className="text-[10px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full">
+                Discover
+              </span>
+            )}
          </div>
-        </div>

-        {/* Badges */}
-        {(video.is_recommended && !calmMode) && (
-          <span className="self-start text-[10px] font-semibold tracking-wide text-indigo-400 bg-indigo-950/60 px-1.5 py-0.5 rounded-full">
-            Discover
-          </span>
-        )}
+          <div className="flex items-center gap-1.5 flex-wrap text-[11px] text-zinc-600">
+            {date && <span>{date}</span>}
+            {video.view_count > 0 && <><span>·</span><span>{formatViews(video.view_count)}</span></>}
+          </div>

-        {/* Actions — fade in on hover */}
-        <div className="mt-auto pt-1.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150 border-t border-zinc-800/80">
-          {actions}
+          {video.description && (
+            <p className="text-[11px] leading-relaxed text-zinc-500 line-clamp-2 mt-0.5">
+              {video.description.replace(/\n+/g, " ")}
+            </p>
+          )}
+
+          {/* Actions — fade in on hover */}
+          <div className="mt-auto pt-1.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity duration-150">
+            {actions}
+          </div>
        </div>
      </div>
    </div>