fix(channels): center table, kill popover top-left flash, exact "+N" count (R8 S1 UAT)

Second UAT pass on the tag cell + popover platform:

- Popover top-left flash (real root cause): the popIn keyframe animates `transform`,
  which overrode Floating UI's positioning `transform: translate(x,y)` for the animation's
  duration, parking the popover at (0,0). Move the animation to an INNER wrapper so the
  positioned element's transform stays clean (verified: menu is at the correct spot from
  frame 0). The isPositioned visibility gate is kept as a belt-and-suspenders.
- Table shifted right / not centered: my previous fixed-15rem tags column + nowrap Sync
  pushed the table past the max-w-[96rem] wrapper so it overflowed. Trim to 12rem tags and
  shorten the long "full history queued/coming" sync labels to "queued"/"coming" so the
  table fits the wrapper (1594 <= 1628) and centers again.
- "+N" count wrong/missing while adding tags: replace the iterative shrink (which lagged a
  render and could clip the pill's digits) with a deterministic measure — a hidden measurer
  lays out all chips + a sample pill, and we compute the exact fit in one pass. The count is
  always correct now (verified across varied rows), and a bare "+" with no number is
  structurally impossible.

frontend/src/components/AnchoredPopover.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode, type Ref } from "react";
+import { type CSSProperties, type ReactNode } from "react";
 import {
   useFloating,
   autoUpdate,
@@ -13,7 +13,6 @@ import {
   useDismiss,
   useRole,
   useInteractions,
-  useMergeRefs,
   useFloatingNodeId,
   safePolygon,
   FloatingNode,
@@ -122,7 +121,6 @@ export function PopoverSurface({
   className,
   style,
   children,
-  floatingRef,
   focusManaged = false,
   initialFocus,
 }: {
@@ -130,8 +128,6 @@ export function PopoverSurface({
   className?: string;
   style?: CSSProperties;
   children: ReactNode;
-  /** Extra ref merged onto the floating node (e.g. a useScrollFade callback ref). */
-  floatingRef?: Ref<HTMLDivElement>;
   focusManaged?: boolean;
   initialFocus?: number | React.MutableRefObject<HTMLElement | null>;
 }) {
@@ -144,30 +140,38 @@ export function PopoverSurface({
     referenceHidden,
     isPositioned,
     open,
+    mode,
   } = popover;
-  const mergedRef = useMergeRefs([refs.setFloating, floatingRef ?? null]);
-  const floatingProps = getFloatingProps();
+  const { style: floatingPropStyle, ...floatingProps } = getFloatingProps() as {
+    style?: CSSProperties;
+  } & Record<string, unknown>;
 
   if (!open) return null;
 
+  const zClass = mode === "hover" ? "z-tooltip" : "z-popover";
+
   const surface = (
     <div
-      ref={mergedRef}
+      ref={refs.setFloating}
       {...floatingProps}
-      className={className}
+      className={zClass}
       style={{
-        ...(floatingProps.style as CSSProperties | undefined),
+        ...floatingPropStyle,
         ...floatingStyles,
-        // Hide until (a) the first position is measured — else it flashes at top-left (0,0) before
-        // the transform lands — and (b) while the trigger is scrolled out of its clipping scroller
-        // (hide-and-follow rather than float over the chrome).
+        // Hide until the first position is measured (else it flashes at 0,0 before the transform
+        // lands) and while the trigger is scrolled out of its clipping scroller (hide-and-follow).
         ...(!isPositioned || referenceHidden
           ? { visibility: "hidden", pointerEvents: "none" }
           : null),
-        ...style,
       }}
     >
-      {children}
+      {/* Inner wrapper carries the visual styling + pop-in animation. Keeping the ANIMATION off the
+          positioned element is essential: the popIn keyframe animates `transform`, which would
+          otherwise override Floating UI's `transform: translate(x,y)` and park the popover at (0,0)
+          for the animation's duration — the "flash in the top-left corner" bug. */}
+      <div className={className} style={style}>
+        {children}
+      </div>
     </div>
   );