);
}
/* ---------- responsive count for the recent-results strip ----------
The name gets a protected, fixed area first (NAME_MIN) so it is never
squeezed; the badges only fill whatever is left over — that leftover
"designated area" is what decides how many fit. Mobile (~340px) → 1–2,
desktop (~684px) → up to 8. Keep these in sync with .qm-lb-row CSS. */
const PREDS_NAME_MIN = 112; // protected name column — never shrinks below this
function fitPredsCount(w) {
if (!w) return 2; // safe default before the first measure (never overflows)
const fixed = 56 /*rank col*/ + 52 /*pts col*/ + 30 /*3 grid gaps*/ + 28 /*row padding*/;
const perBadge = 46; // badge min-width + gap
const badgeArea = w - fixed - PREDS_NAME_MIN; // designated space for badges
const n = Math.floor(badgeArea / perBadge);
return Math.max(1, Math.min(8, n));
}
/* Observe a list container's width and return how many badges fit. */
function usePredsCount(ref) {
const [w, setW] = useState(0);
useEffect(() => {
const el = ref.current;
if (!el) return;
const update = () => setW(el.clientWidth);
update();
let ro;
if (window.ResizeObserver) { ro = new ResizeObserver(update); ro.observe(el); }
else window.addEventListener("resize", update);
return () => { ro ? ro.disconnect() : window.removeEventListener("resize", update); };
}, [ref]);
return fitPredsCount(w);
}
/* ---------- movement indicator ---------- */
function Move({ delta }) {
if (!delta) return –;
const up = delta > 0;
return {up ? "▲" : "▼"}{Math.abs(delta)};
}
/* ---------- toast system (global) ---------- */
const _toastListeners = new Set();
function toast(msg, variant) {
const id = Math.random().toString(36).slice(2);
_toastListeners.forEach((fn) => fn({ id, msg, variant }));
}
function ToastHost() {
const [items, setItems] = useState([]);
useEffect(() => {
const fn = (t) => {
setItems((cur) => [...cur, t]);
setTimeout(() => setItems((cur) => cur.filter((x) => x.id !== t.id)), 2600);
};
_toastListeners.add(fn);
return () => _toastListeners.delete(fn);
}, []);
return (