fix: glossary tooltip layout and viewport overflow

linkify() was returning a bare array, so its fragments landed as
direct children of flex <li> bullets — each text/link piece became
its own flex item and scrambled the reading order on wrap. Now
wrapped in a single <span> so text flows normally.

Tooltips also always centered under the term regardless of position,
overflowing off-screen near the viewport edges. GlossaryMark now
measures the anchor on hover and flips to a left- or right-aligned
placement when centering would push it out of view.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/lib/glossary.tsx

@@ -16,18 +16,25 @@ for (const entry of GLOSSARY) {
 const ALL_SURFACES = [...MATCH_TO_ID.keys()].sort((a, b) => b.length - a.length)
 const GLOSSARY_REGEX = new RegExp(`\\b(${ALL_SURFACES.map(escapeRegExp).join('|')})\\b`, 'g')
 
-/** Wraps every occurrence of a known glossary term in `text` with a hoverable, linked <GlossaryMark>. */
+/** Wraps every occurrence of a known glossary term in `text` with a hoverable, linked <GlossaryMark>.
+ *  Always returns a single inline element — never a bare array — so callers can safely place the
+ *  result inside a `flex` container (e.g. a bulleted `<li>`) without each fragment becoming its own
+ *  flex item and breaking the reading order. */
 export function linkify(text: string): React.ReactNode {
   const parts = text.split(GLOSSARY_REGEX)
   if (parts.length === 1) return text
 
-  return parts.map((part, i) => {
-    const id = MATCH_TO_ID.get(part)
-    if (id === undefined) return <Fragment key={i}>{part}</Fragment>
-    return (
-      <GlossaryMark key={i} id={id}>
-        {part}
-      </GlossaryMark>
-    )
-  })
+  return (
+    <span>
+      {parts.map((part, i) => {
+        const id = MATCH_TO_ID.get(part)
+        if (id === undefined) return <Fragment key={i}>{part}</Fragment>
+        return (
+          <GlossaryMark key={i} id={id}>
+            {part}
+          </GlossaryMark>
+        )
+      })}
+    </span>
+  )
 }