From f422d754b94282af83298d63b8c720f9e4fea786 Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 17:12:18 +0200
Subject: [PATCH] Compact all mode/tab switchers site-wide
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Home feed mode: px-3 py-1.5 text-sm → px-2 py-1 text-xs, tighter container
Hide-watched toggle: same reduction
Following tabs: px-4 py-2 text-sm → px-3 py-1.5 text-xs, "Latest uploads" → "Feed"
Discovery tabs: same reduction

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/Discovery.jsx | 2 +-
 frontend/src/pages/Following.jsx | 8 ++++----
 frontend/src/pages/Home.jsx      | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/Discovery.jsx b/frontend/src/pages/Discovery.jsx
index b25c6ac..20b73af 100644
--- a/frontend/src/pages/Discovery.jsx
+++ b/frontend/src/pages/Discovery.jsx
@@ -176,7 +176,7 @@ function Tab({ active, onClick, children, count }) {
     <button
       onClick={onClick}
       className={[
-        "px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px flex items-center gap-2",
+        "px-3 py-1.5 text-xs font-medium border-b-2 transition-colors -mb-px flex items-center gap-1.5",
         active
           ? "border-accent text-zinc-100"
           : "border-transparent text-zinc-500 hover:text-zinc-300",
diff --git a/frontend/src/pages/Following.jsx b/frontend/src/pages/Following.jsx
index de99733..544adc7 100644
--- a/frontend/src/pages/Following.jsx
+++ b/frontend/src/pages/Following.jsx
@@ -780,13 +780,13 @@ export default function Following() {
       </div>
 
       {/* Tabs */}
-      <div className="flex items-center gap-1 border-b border-zinc-800">
-        {[["channels", "Channels"], ["feed", "Latest uploads"], ["groups", "Groups"]].map(([key, label]) => (
+      <div className="flex items-center gap-0.5 border-b border-zinc-800">
+        {[["channels", "Channels"], ["feed", "Feed"], ["groups", "Groups"]].map(([key, label]) => (
           <button
             key={key}
             onClick={() => setTab(key)}
             className={[
-              "px-4 py-2 text-sm font-medium border-b-2 transition-colors -mb-px",
+              "px-3 py-1.5 text-xs font-medium border-b-2 transition-colors -mb-px",
               tab === key
                 ? "border-accent text-zinc-100"
                 : "border-transparent text-zinc-500 hover:text-zinc-300",
@@ -794,7 +794,7 @@ export default function Following() {
           >
             {label}
             {key === "groups" && groups.length > 0 && (
-              <span className="ml-1.5 text-xs text-zinc-600">{groups.length}</span>
+              <span className="ml-1 text-[10px] text-zinc-600">{groups.length}</span>
             )}
           </button>
         ))}
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 38cce0b..286d49b 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -129,7 +129,7 @@ export default function Home() {
                 onClick={handleHideWatchedToggle}
                 title={hideWatched ? "Showing unwatched only" : "Showing all videos"}
                 className={[
-                  "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors border",
+                  "flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors border",
                   hideWatched
                     ? "bg-accent/10 text-accent border-accent/30"
                     : "text-zinc-500 border-zinc-800 hover:text-zinc-300 hover:border-zinc-700",
@@ -144,14 +144,14 @@ export default function Home() {
                 </svg>
                 {hideWatched ? "Unwatched" : "All"}
               </button>
-              <div className="flex items-center gap-1 bg-zinc-900 rounded-xl p-1">
+              <div className="flex items-center gap-0.5 bg-zinc-900 rounded-lg p-0.5">
                 {FEED_MODES.map(m => (
                   <button
                     key={m.value}
                     onClick={() => handleModeChange(m.value)}
                     title={m.hint}
                     className={[
-                      "relative px-3 py-1.5 rounded-lg text-sm font-medium transition-colors",
+                      "relative px-2 py-1 rounded-md text-xs font-medium transition-colors",
                       mode === m.value
                         ? "bg-zinc-700 text-zinc-100"
                         : "text-zinc-500 hover:text-zinc-300",
@@ -159,7 +159,7 @@ export default function Home() {
                   >
                     {m.label}
                     {m.value === "inbox" && inboxCount > 0 && (
-                      <span className="absolute -top-1 -right-1 min-w-[16px] h-4 bg-accent text-black text-[10px] font-bold rounded-full flex items-center justify-center px-1 leading-none">
+                      <span className="absolute -top-1 -right-1 min-w-[13px] h-3 bg-accent text-black text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
                         {inboxCount > 99 ? "99+" : inboxCount}
                       </span>
                     )}