ui: tighten dashboard copy and fix layout issues

components/ui/InfoTip.tsx

@@ -13,10 +13,12 @@
  *     If you need a paragraph, you're explaining the wrong thing.
  *   * The icon is intentionally subtle (12 px circle, ink-4 colour). It
  *     should disappear visually until the user actively scans for help.
- *   * The tooltip uses CSS hover only — no JS positioning, no portals.
- *     Trade-off: it's clipped by the nearest `overflow:hidden` ancestor.
- *     Pages that need tooltips inside a `<table>` cell should add
- *     `overflow: visible` to that row/td.
+ *   * The tooltip uses CSS hover positioning — no portals. The only JS is
+ *     an on-reveal measurement that clamps the bubble inside the viewport
+ *     (a centred bubble on an icon near the screen edge used to hang
+ *     off-screen, worst on phones). Trade-off: it's still clipped by the
+ *     nearest `overflow:hidden` ancestor. Pages that need tooltips inside
+ *     a `<table>` cell should add `overflow: visible` to that row/td.
  *
  * Usage:
  *   <span>Latest cycle <InfoTip text="The single most recent funding payment, in %." /></span>
@@ -27,6 +29,7 @@
  *   />
  */
 
+import { useRef } from 'react'
 import type { CSSProperties } from 'react'
 
 type Placement = 'top' | 'bottom' | 'left' | 'right'
@@ -46,8 +49,28 @@ export default function InfoTip({
   width = 240,
   iconStyle,
 }: Props) {
+  const rootRef = useRef<HTMLSpanElement>(null)
+
+  // Clamp the bubble inside the viewport when it's revealed. The bubble is
+  // CSS-centred on the icon, so near a screen edge it overflowed off-screen.
+  // Measured at shift=0, then the needed horizontal offset is written to the
+  // --tip-shift var consumed by the .infotip-top/-bottom transforms.
+  function clampIntoViewport() {
+    const bubble = rootRef.current?.querySelector<HTMLElement>('.infotip-bubble')
+    if (!bubble) return
+    bubble.style.setProperty('--tip-shift', '0px')
+    const r = bubble.getBoundingClientRect()
+    const vw = document.documentElement.clientWidth
+    const margin = 8
+    let shift = 0
+    if (r.left < margin) shift = margin - r.left
+    else if (r.right > vw - margin) shift = (vw - margin) - r.right
+    if (shift !== 0) bubble.style.setProperty('--tip-shift', `${shift}px`)
+  }
+
   return (
     <span
+      ref={rootRef}
       className={`infotip infotip-${placement}`}
       // role=button is a slight overstatement but it lets screen-reader users
       // know there's a thing to tab to. The actual content is in data-tip and
@@ -56,6 +79,9 @@ export default function InfoTip({
       tabIndex={0}
       aria-label={text}
       style={{ ['--tip-w' as string]: `${width}px`, ...iconStyle }}
+      onMouseEnter={clampIntoViewport}
+      onFocus={clampIntoViewport}
+      onTouchStart={clampIntoViewport}
     >
       <span aria-hidden="true" className="infotip-icon">?</span>
       <span className="infotip-bubble" role="tooltip">{text}</span>