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

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) {