feat: Revamp instance page

adminsite/components/PageHeader.tsx

@@ -15,6 +15,8 @@ function CopyButton({ value }: { value: string }) {
     return (
         <button
             type="button"
+            // Never the thing that wraps: it is 5 characters and the value
+            // beside it may be 36.
             onClick={async () => {
                 try {
                     await navigator.clipboard.writeText(value);
@@ -26,7 +28,7 @@ function CopyButton({ value }: { value: string }) {
                     // selectable either way, so this needs no error state.
                 }
             }}
-            className="rounded-sm border border-rule px-1.5 py-px font-mono text-[0.62rem] uppercase tracking-[0.1em] text-ink-3 hover:border-accent hover:text-accent"
+            className="shrink-0 rounded-sm border border-rule px-1.5 py-px font-mono text-[0.62rem] uppercase tracking-[0.1em] text-ink-3 hover:border-accent hover:text-accent"
         >
             {done ? "Copied" : "Copy"}
         </button>
@@ -76,9 +78,13 @@ export function PageHeader({
             {(record?.length || status) && (
                 <div className="flex flex-wrap items-center gap-x-5 gap-y-2.5 border-t border-rule pt-2.5">
                     {record?.map((f) => (
-                        <span key={f.key} className="flex items-center gap-2">
-                            <span className="font-mono text-[0.64rem] uppercase tracking-[0.14em] text-ink-3">{f.key}</span>
-                            <span className="font-mono text-[0.78rem] tabular-nums text-ink-2">{f.value}</span>
+                        // min-w-0 and break-all because the commonest value here
+                        // is a 36-character UUID with a Copy button beside it,
+                        // which does not fit a 320px screen as one unbreakable
+                        // token and pushed the whole page sideways.
+                        <span key={f.key} className="flex min-w-0 items-center gap-2">
+                            <span className="shrink-0 font-mono text-[0.64rem] uppercase tracking-[0.14em] text-ink-3">{f.key}</span>
+                            <span className="min-w-0 break-all font-mono text-[0.78rem] tabular-nums text-ink-2">{f.value}</span>
                             {f.copy && <CopyButton value={f.value} />}
                         </span>
                     ))}