fix(web): center active filters and compact mobile cards

reaction_board/web/static/components.js

@@ -127,6 +127,15 @@ export function metricChips(metrics, active, dataName = "metric") {
   )).join("");
 }
 
+export function centerActiveChips(root) {
+  root.querySelectorAll(".chip-row.scroll-x").forEach((row) => {
+    const active = row.querySelector(".chip.active");
+    if (!active) return;
+    const target = active.offsetLeft - row.clientWidth / 2 + active.clientWidth / 2;
+    row.scrollLeft = Math.max(0, target);
+  });
+}
+
 export function pager(page, pages) {
   if (!pages || pages <= 1) return "";
   return `<div class="pager">

reaction_board/web/static/style.css

@@ -258,9 +258,10 @@ h1, h2, h3, p { margin: 0; }
 
 .notice-row {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 4px 12px;
   padding: 11px 14px;
   border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
   border-radius: 13px;
@@ -501,6 +502,10 @@ h1, h2, h3, p { margin: 0; }
 .select { max-width: 170px; }
 .filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 .filter-row > .chip-row { flex: 1; min-width: 200px; }
+@media (max-width: 619px) {
+  .filter-row > .chip-row { flex-basis: 100%; min-width: 0; }
+  .filter-row .select { width: 100%; max-width: none; }
+}
 .growth-days { padding-top: 2px; }
 
 .rank-list { display: flex; flex-direction: column; gap: 8px; }

reaction_board/web/static/views/fans.js

@@ -1,5 +1,5 @@
 import { api } from "../api.js";
-import { emptyState, sectionHeader } from "../components.js";
+import { centerActiveChips, emptyState, sectionHeader } from "../components.js";
 import { lineChart } from "../charts.js";
 import {
   escapeAttr, escapeHtml, formatCount, formatDate, formatDelta,
@@ -75,6 +75,7 @@ export async function renderFans(root, { query }) {
   root.querySelector("#fan-mid")?.addEventListener("change", (event) => {
     replaceQuery({ mid: event.target.value });
   });
+  centerActiveChips(root);
   const chartElement = root.querySelector("#fans-chart");
   if (chartElement) {
     lineChart(chartElement, {

reaction_board/web/static/views/rankings.js

@@ -1,6 +1,6 @@
 import { api, apiUrl } from "../api.js";
 import {
-  chip, emptyState, pager, sectionHeader, upCard, videoCard,
+  centerActiveChips, chip, emptyState, pager, sectionHeader, upCard, videoCard,
 } from "../components.js";
 import { escapeAttr, escapeHtml, formatCount } from "../format.js";
 import { replaceQuery } from "../router.js";
@@ -161,4 +161,5 @@ export async function renderRankings(root, { query }) {
     if (button.disabled) return;
     replaceQuery({ page: button.dataset.page });
   }));
+  centerActiveChips(root);
 }

reaction_board/web/static/views/video.js

@@ -1,6 +1,7 @@
 import { api } from "../api.js";
 import {
-  badge, cover, emptyState, metricChips, metricGrid, sectionHeader, videoCard,
+  badge, centerActiveChips, cover, emptyState, metricChips, metricGrid,
+  sectionHeader, videoCard,
 } from "../components.js";
 import { lineChart, emptyChart } from "../charts.js";
 import {
@@ -110,6 +111,7 @@ export async function renderVideo(root, { params, query }) {
   root.querySelectorAll("[data-range]").forEach((button) => button.addEventListener("click", () => {
     replaceQuery({ range: button.dataset.range });
   }));
+  centerActiveChips(root);
 
   const chartElement = root.querySelector("#video-trend");
   if (chartElement) {