fix(ui): portal tooltips, opaque glass, settings rail+stable height, notif test, channel help

- Tooltip: render in a portal with fixed positioning + edge-flip so hints are never
  clipped by overflow/stacking ancestors (fixes mispositioned/hidden bubbles app-wide).
- Glass: raise opacity so overlay menus/panels stay readable over content.
- SettingsPanel: vertical tab rail (no wrapping/jumping), content grid-stacked so the
  panel sizes to the tallest tab (stable height) and floats to its content height.
- Notifications: the test toast is now a normal auto-dismissing toast (with countdown
  bar) that also plays the sound via a new force-sound flag.
- Channel manager: explain priority/tags/hide and what 'Sync subscriptions' does;
  add a 'Channel priority' feed sort so priority is actually meaningful.

frontend/src/components/Tooltip.tsx

@@ -1,10 +1,13 @@
-import { useSyncExternalStore } from "react";
+import { useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
 import { hintsEnabled, subscribeHints } from "../lib/hints";
 
-type Side = "top" | "bottom" | "left";
+type Side = "top" | "bottom";
+type Coords = { left: number; top: number; placement: Side };
 
 /** Wrap any element to show a short glass hint caption on hover — but only while the
- *  app-wide hints toggle (Settings → Appearance) is on. */
+ *  app-wide hints toggle (Settings → Appearance) is on. Rendered in a portal with
+ *  fixed positioning so it is never clipped by an overflow/stacking ancestor. */
 export default function Tooltip({
   hint,
   side = "top",
@@ -15,24 +18,53 @@ export default function Tooltip({
   children: React.ReactNode;
 }) {
   const enabled = useSyncExternalStore(subscribeHints, hintsEnabled, hintsEnabled);
+  const ref = useRef<HTMLSpanElement>(null);
+  const [coords, setCoords] = useState<Coords | null>(null);
+
+  function show() {
+    const el = ref.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    // Prefer the requested side; flip to bottom if there's no room above.
+    const placement: Side = side === "bottom" || r.top < 90 ? "bottom" : "top";
+    setCoords({
+      left: Math.min(Math.max(r.left + r.width / 2, 92), window.innerWidth - 92),
+      top: placement === "top" ? r.top - 8 : r.bottom + 8,
+      placement,
+    });
+  }
+  function hide() {
+    setCoords(null);
+  }
+
   if (!enabled || !hint) return <>{children}</>;
 
-  const place =
-    side === "bottom"
-      ? "top-full mt-2 left-1/2 -translate-x-1/2"
-      : side === "left"
-        ? "right-full mr-2 top-1/2 -translate-y-1/2"
-        : "bottom-full mb-2 left-1/2 -translate-x-1/2";
-
   return (
-    <span className="relative inline-flex group/tip">
+    <span
+      ref={ref}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={hide}
+      className="inline-flex"
+    >
       {children}
-      <span
-        role="tooltip"
-        className={`glass pointer-events-none absolute ${place} z-50 w-max max-w-[220px] px-2.5 py-1.5 rounded-lg text-xs leading-snug text-fg font-normal normal-case tracking-normal opacity-0 group-hover/tip:opacity-100 transition-opacity duration-150`}
-      >
-        {hint}
-      </span>
+      {coords &&
+        createPortal(
+          <div
+            role="tooltip"
+            style={{
+              position: "fixed",
+              left: coords.left,
+              top: coords.top,
+              transform: `translateX(-50%) translateY(${coords.placement === "top" ? "-100%" : "0"})`,
+            }}
+            className="glass pointer-events-none z-[100] w-max max-w-[240px] px-2.5 py-1.5 rounded-lg text-xs leading-snug text-fg font-normal normal-case tracking-normal animate-[fadeIn_0.12s_ease]"
+          >
+            {hint}
+          </div>,
+          document.body
+        )}
     </span>
   );
 }