UX: list view everywhere, mobile polish, affinity dismissal fix

- Default list view across all pages (Home, Following, History, Queue,
  ContinueWatching, Liked, Discovery, SearchResults, Channel)
- Watch.jsx mobile: smaller chips/title/avatar/meta, hide tags + keyboard
  hint on mobile, tighter gaps, compact description padding
- Fix mobile bottom nav showing focus outline on tap
- Fix _update_affinity to write negative entries (not just positive) so
  dislikes/dismissals on unseen content actually register
- Dismissing a discovery video now fires -3.0 affinity against its tags,
  matching the dislike weight

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/Watch.jsx

@@ -71,10 +71,10 @@ function DescriptionBox({ text }) {
 
   return (
     <div
-      className="bg-zinc-900 rounded-xl p-4 cursor-pointer select-none"
+      className="bg-zinc-900 rounded-xl p-3 sm:p-4 cursor-pointer select-none"
       onClick={() => hasMore && setExpanded(v => !v)}
     >
-      <p className="text-sm text-zinc-300 whitespace-pre-line leading-relaxed">
+      <p className="text-[13px] text-zinc-300 whitespace-pre-line leading-relaxed">
         {linkify(displayed)}
       </p>
       {hasMore && (
@@ -94,7 +94,7 @@ function Chip({ onClick, active, disabled, children }) {
       onClick={onClick}
       disabled={disabled}
       className={[
-        "flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition-colors",
+        "flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
         active ? "bg-zinc-100 text-zinc-900 hover:bg-white" : "bg-zinc-800 text-zinc-300 hover:bg-zinc-700",
         disabled && "opacity-40 cursor-not-allowed",
       ].filter(Boolean).join(" ")}
@@ -844,7 +844,7 @@ export default function Watch() {
       <div className={theater ? "flex flex-col gap-6" : "flex flex-col xl:flex-row gap-6"}>
 
         {/* ── Left: video + info ───────────────────────────────────────────── */}
-        <div className={theater ? "w-full flex flex-col gap-4" : "flex-1 min-w-0 flex flex-col gap-4"}>
+        <div className={theater ? "w-full flex flex-col gap-3 sm:gap-4" : "flex-1 min-w-0 flex flex-col gap-3 sm:gap-4"}>
 
           {/* Player */}
           <div className={theater ? "w-full aspect-video bg-black overflow-hidden shadow-2xl" : "w-full aspect-video bg-black rounded-2xl overflow-hidden shadow-2xl"}>
@@ -887,11 +887,11 @@ export default function Watch() {
           )}
 
           {/* Title */}
-          <h1 className="text-xl font-bold text-white leading-snug">{title}</h1>
+          <h1 className="text-base sm:text-xl font-bold text-white leading-snug">{title}</h1>
 
           {/* Meta + actions row */}
           <div className="flex items-center justify-between flex-wrap gap-3">
-            <div className="flex items-center gap-2 text-sm text-zinc-500 flex-wrap">
+            <div className="flex items-center gap-2 text-xs text-zinc-500 flex-wrap">
               {date && <span>{date}</span>}
               {video?.view_count > 0 && <><span>·</span><span>{formatViews(video.view_count)}</span></>}
               {video?.like_count > 0 && <><span>·</span><span>{formatViews(video.like_count).replace(" views", "")} likes</span></>}
@@ -914,7 +914,7 @@ export default function Watch() {
 
 
             {/* Actions */}
-            <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex items-center gap-1.5 flex-wrap">
               {!dlComplete && !isDownloading && !downloadMut.isPending && (
                 <select
                   value={selectedQuality ?? "best"}
@@ -1048,9 +1048,9 @@ export default function Watch() {
             <Link to={`/channels/${video?.channel_id}`} className="shrink-0">
               {channel?.thumbnail_url ? (
                 <img src={channel.thumbnail_url} alt={channelName}
-                  className="w-11 h-11 rounded-full object-cover" />
+                  className="w-9 h-9 sm:w-11 sm:h-11 rounded-full object-cover" />
               ) : (
-                <div className="w-11 h-11 rounded-full flex items-center justify-center font-bold text-white text-base shrink-0"
+                <div className="w-9 h-9 sm:w-11 sm:h-11 rounded-full flex items-center justify-center font-bold text-white text-base shrink-0"
                   style={{ backgroundColor: avatarColor(channelName) }}>
                   {channelName?.[0]?.toUpperCase()}
                 </div>
@@ -1084,7 +1084,7 @@ export default function Watch() {
 
           {/* Tags */}
           {tags.length > 0 && (
-            <div className="flex flex-wrap gap-1.5">
+            <div className="hidden sm:flex flex-wrap gap-1.5">
               {tags.map(tag => (
                 <span key={tag} className="px-2.5 py-1 rounded-full bg-zinc-800/80 text-zinc-500 text-xs">
                   {tag}
@@ -1107,7 +1107,7 @@ export default function Watch() {
           )}
 
           {/* Keyboard shortcuts hint */}
-          <p className={`text-xs text-zinc-700 text-center ${theater ? "max-w-4xl mx-auto w-full" : ""}`}>
+          <p className={`hidden sm:block text-xs text-zinc-700 text-center ${theater ? "max-w-4xl mx-auto w-full" : ""}`}>
             Space/K · pause &nbsp;·&nbsp; F · fullscreen &nbsp;·&nbsp; M · mute &nbsp;·&nbsp; ←/→ seek 5s &nbsp;·&nbsp; ↑/↓ volume &nbsp;·&nbsp; ,/. speed &nbsp;·&nbsp; T · theater
           </p>