feat: HQ redesign

adminsite/components/Queue.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import clsx from "clsx";
+import type { ReactNode } from "react";
 
 const TONE = {
     expired: "border-l-expired text-expired",
@@ -16,7 +17,11 @@ export function Queue({
     title: string;
     count: number;
     tone: keyof typeof TONE;
-    items: { label: string; href: string; meta: string }[];
+    /* `meta` is a node rather than a string so a queue about time can carry the
+     * term measurement itself. A tier name told the reader what the instance
+     * was; the queue is sorted by how soon it lapses, and that was the one
+     * figure the row did not show. */
+    items: { label: string; href: string; meta: ReactNode }[];
 }) {
     return (
         <section
@@ -38,12 +43,12 @@ export function Queue({
                     {items.map((i) => (
                         <li
                             key={i.href}
-                            className="flex justify-between gap-2 font-mono text-[0.72rem] text-ink-2"
+                            className="flex items-center justify-between gap-2 font-mono text-[0.72rem] text-ink-2"
                         >
-                            <Link href={i.href} className="text-accent underline">
+                            <Link href={i.href} className="truncate text-accent underline">
                                 {i.label}
                             </Link>
-                            <span className="tabular-nums">{i.meta}</span>
+                            <span className="shrink-0 tabular-nums">{i.meta}</span>
                         </li>
                     ))}
                 </ul>