From ddb171fca3580b18cdd0a2370e8b284ba6315685 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 21 Aug 2026 19:37:11 +0200
Subject: [PATCH] style(type): raise the too-small toolbar and filter text
 toward the view-switcher size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The view-switcher's 16px reads comfortably; the toolbar and filter controls sat at 12px. Bring
the marked controls up to match, and lift the general scale on the shared filter surfaces.

- Toolbar (feed + channel + Plex, via the shared components): FilterSelect and SortControl trigger
  pills text-xs → text-base (16px, the view-switcher size); the result count → text-sm; the
  active-filter chips → text-sm with the "FILTERED BY" label text-2xs → text-xs.
- Filterbar: the Combobox picker input → text-base (matching the toolbar pills) + its chips → text-sm;
  the panel/widget headers (SidePanel collapsed-rail + panel title, PanelGroup widget titles) up one step.

Channel info and the manager tables were already at 14–16px (readable), so they were left as-is.
---
 frontend/src/components/ActiveFilterChips.tsx | 6 +++---
 frontend/src/components/Combobox.tsx          | 4 ++--
 frontend/src/components/Feed.tsx              | 2 +-
 frontend/src/components/FilterSelect.tsx      | 2 +-
 frontend/src/components/PanelGroup.tsx        | 2 +-
 frontend/src/components/SidePanel.tsx         | 4 ++--
 frontend/src/components/SortControl.tsx       | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ActiveFilterChips.tsx b/frontend/src/components/ActiveFilterChips.tsx
index a6429473..5268a59c 100644
--- a/frontend/src/components/ActiveFilterChips.tsx
+++ b/frontend/src/components/ActiveFilterChips.tsx
@@ -21,7 +21,7 @@ export default function ActiveFilterChips({
       className="flex flex-wrap items-center gap-1.5 pb-3"
       aria-label={t("feed.chips.label")}
     >
-      <span className="text-2xs uppercase tracking-wider text-muted mr-0.5">
+      <span className="text-xs uppercase tracking-wider text-muted mr-0.5">
         {t("feed.chips.label")}
       </span>
       {filters.map((f) => (
@@ -32,7 +32,7 @@ export default function ActiveFilterChips({
           onClick={f.remove}
           title={t("feed.chips.remove", { name: f.label })}
           aria-label={t("feed.chips.remove", { name: f.label })}
-          className="chip group pl-2.5 pr-1.5 py-1 text-xs hover:border-accent hover:bg-accent/20 transition"
+          className="chip group pl-2.5 pr-1.5 py-1 text-sm hover:border-accent hover:bg-accent/20 transition"
         >
           <span className="max-w-56 truncate">{f.label}</span>
           <X className="w-3 h-3 shrink-0 opacity-60 group-hover:opacity-100" />
@@ -42,7 +42,7 @@ export default function ActiveFilterChips({
         <button
           data-testid="active-filter-clear-all"
           onClick={onClearAll}
-          className="ml-0.5 text-xs text-muted hover:text-fg underline underline-offset-2 transition"
+          className="ml-0.5 text-sm text-muted hover:text-fg underline underline-offset-2 transition"
         >
           {t("sidebar.clearAll")}
         </button>
diff --git a/frontend/src/components/Combobox.tsx b/frontend/src/components/Combobox.tsx
index 8cfab27b..be9df823 100644
--- a/frontend/src/components/Combobox.tsx
+++ b/frontend/src/components/Combobox.tsx
@@ -154,7 +154,7 @@ export default function Combobox({
         className="glass-card flex min-h-9 w-full cursor-text flex-wrap items-center gap-1 rounded-lg border border-border px-1.5 py-1 transition focus-within:border-accent focus-within:ring-2 focus-within:ring-accent/30"
       >
         {selected.map((v) => (
-          <span key={v} className="chip inline-flex items-center gap-1 px-2 py-0.5 text-xs">
+          <span key={v} className="chip inline-flex items-center gap-1 px-2 py-0.5 text-sm">
             <span className="max-w-36 truncate">{labelFor(v)}</span>
             <button
               type="button"
@@ -197,7 +197,7 @@ export default function Combobox({
               ? (placeholder ?? t("common.search", { defaultValue: "Search" }))
               : ""
           }
-          className="min-w-16 flex-1 bg-transparent px-1 py-0.5 text-sm outline-hidden placeholder:text-muted/60"
+          className="min-w-16 flex-1 bg-transparent px-1 py-0.5 text-base outline-hidden placeholder:text-muted/60"
         />
         <ChevronDown className="pointer-events-none mr-0.5 h-3.5 w-3.5 shrink-0 text-muted" />
       </div>
diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index 9ad85b6e..d9358ab2 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -617,7 +617,7 @@ export default function Feed({
           </>
         )}
         <span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
-        <span data-testid="feed-result-count" className="text-xs text-muted whitespace-nowrap">
+        <span data-testid="feed-result-count" className="text-sm text-muted whitespace-nowrap">
           {summaryQuery.data
             ? t("feed.videoCount", {
                 count: summaryQuery.data.count,
diff --git a/frontend/src/components/FilterSelect.tsx b/frontend/src/components/FilterSelect.tsx
index 3b1f39fc..6ec5be4d 100644
--- a/frontend/src/components/FilterSelect.tsx
+++ b/frontend/src/components/FilterSelect.tsx
@@ -82,7 +82,7 @@ export default function FilterSelect({
         {...pop.getReferenceProps()}
         data-testid={testId}
         aria-label={label}
-        className={`glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition ${
+        className={`glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-base transition ${
           open ? "border-accent" : "border-border"
         }`}
       >
diff --git a/frontend/src/components/PanelGroup.tsx b/frontend/src/components/PanelGroup.tsx
index a64cdd93..d0db5dcc 100644
--- a/frontend/src/components/PanelGroup.tsx
+++ b/frontend/src/components/PanelGroup.tsx
@@ -56,7 +56,7 @@ export default function PanelGroup({
         <button
           onClick={editing ? undefined : onToggleCollapse}
           disabled={editing}
-          className="flex-1 min-w-0 flex items-center text-left select-none text-xs uppercase tracking-wide text-muted enabled:hover:text-fg transition"
+          className="flex-1 min-w-0 flex items-center text-left select-none text-sm uppercase tracking-wide text-muted enabled:hover:text-fg transition"
         >
           <span className="truncate">{title}</span>
         </button>
diff --git a/frontend/src/components/SidePanel.tsx b/frontend/src/components/SidePanel.tsx
index 192e7601..f338aa49 100644
--- a/frontend/src/components/SidePanel.tsx
+++ b/frontend/src/components/SidePanel.tsx
@@ -74,7 +74,7 @@ export default function SidePanel({
           </span>
         )}
         <span
-          className="text-2xs font-semibold uppercase tracking-[0.18em] text-muted"
+          className="text-xs font-semibold uppercase tracking-[0.18em] text-muted"
           style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }}
         >
           {title}
@@ -98,7 +98,7 @@ export default function SidePanel({
               {pinned ? <PinOff className="w-4 h-4" /> : <Pin className="w-4 h-4" />}
             </button>
             <span className="shrink-0 flex text-accent">{icon}</span>
-            <span className="flex-1 min-w-0 truncate text-xs font-bold uppercase tracking-[0.12em]">
+            <span className="flex-1 min-w-0 truncate text-sm font-bold uppercase tracking-[0.12em]">
               {title}
             </span>
             {count > 0 && (
diff --git a/frontend/src/components/SortControl.tsx b/frontend/src/components/SortControl.tsx
index 19d0d374..4e37c4ef 100644
--- a/frontend/src/components/SortControl.tsx
+++ b/frontend/src/components/SortControl.tsx
@@ -68,7 +68,7 @@ export default function SortControl({
         ref={pop.refs.setReference}
         {...pop.getReferenceProps()}
         aria-label={label}
-        className={`glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition ${
+        className={`glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-base transition ${
           open ? "border-accent" : "border-border"
         }`}
       >