Fix tooltips clipped by overflow containers, improve Backend tooltip text

Rewrite Tooltip to use React portal (createPortal to document.body) so
tooltips render above all UI elements regardless of ancestor overflow:hidden.
Also increased max-width from 220px to 280px for longer descriptions.

Expanded Backend tooltip to explain each option (Anthropic, Bedrock,
Ollama, LiteLLM) with practical context for new users.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/src/components/projects/ProjectCard.tsx

@@ -449,7 +449,7 @@ export default function ProjectCard({ project }: Props) {
         <div className="mt-2 ml-4 space-y-2 min-w-0 overflow-hidden">
           {/* Backend selector */}
           <div className="flex items-center gap-1 text-xs">
-            <span className="text-[var(--text-secondary)] mr-1">Backend:<Tooltip text="Anthropic = direct Claude API via OAuth. Bedrock = AWS Bedrock. Ollama = local models. LiteLLM = proxy gateway for 100+ providers." /></span>
+            <span className="text-[var(--text-secondary)] mr-1">Backend:<Tooltip text="Choose the AI model provider for this project. Anthropic: Connect directly to Claude via OAuth login (run 'claude login' in terminal). Bedrock: Route through AWS Bedrock using your AWS credentials. Ollama: Use locally-hosted open-source models (Llama, Mistral, etc.) via an Ollama server. LiteLLM: Connect through a LiteLLM proxy gateway to access 100+ model providers (OpenAI, Azure, Gemini, etc.)." /></span>
             <select
               value={project.backend}
               onChange={(e) => { e.stopPropagation(); handleBackendChange(e.target.value as Backend); }}

app/src/components/ui/Tooltip.tsx

@@ -1,4 +1,5 @@
-import { useState, useRef, useEffect, type ReactNode } from "react";
+import { useState, useRef, useLayoutEffect, type ReactNode } from "react";
+import { createPortal } from "react-dom";
 
 interface TooltipProps {
   text: string;
@@ -7,53 +8,44 @@ interface TooltipProps {
 
 /**
  * A small circled question-mark icon that shows a tooltip on hover.
- * Renders inline and automatically repositions to stay within the viewport.
+ * Uses a portal to render at `document.body` so the tooltip is never
+ * clipped by ancestor `overflow: hidden` containers.
  */
 export default function Tooltip({ text, children }: TooltipProps) {
   const [visible, setVisible] = useState(false);
-  const [position, setPosition] = useState<"top" | "bottom">("top");
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
-  const [align, setAlign] = useState<"center" | "left" | "right">("center");
+  const [, setPlacement] = useState<"top" | "bottom">("top");
   const triggerRef = useRef<HTMLSpanElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!visible || !triggerRef.current || !tooltipRef.current) return;
 
-    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const trigger = triggerRef.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const tooltip = tooltipRef.current.getBoundingClientRect();
+    const gap = 6;
 
-    // Decide vertical position: prefer top, fall back to bottom
+    // Vertical: prefer above, fall back to below
-    if (triggerRect.top - tooltipRect.height - 6 < 4) {
+    const above = trigger.top - tooltip.height - gap >= 4;
-      setPosition("bottom");
+    const pos = above ? "top" : "bottom";
-    } else {
+    setPlacement(pos);
-      setPosition("top");
-    }
 
-    // Decide horizontal alignment
+    const top =
-    const centerLeft = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+      pos === "top"
-    const centerRight = centerLeft + tooltipRect.width;
+        ? trigger.top - tooltip.height - gap
-    if (centerLeft < 4) {
+        : trigger.bottom + gap;
-      setAlign("left");
+
-    } else if (centerRight > window.innerWidth - 4) {
+    // Horizontal: center on trigger, clamp to viewport
-      setAlign("right");
+    let left = trigger.left + trigger.width / 2 - tooltip.width / 2;
-    } else {
+    left = Math.max(4, Math.min(left, window.innerWidth - tooltip.width - 4));
-      setAlign("center");
+
-    }
+    setCoords({ top, left });
   }, [visible]);
 
-  const positionClasses = position === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5";
-
-  const alignClasses =
-    align === "left"
-      ? "left-0"
-      : align === "right"
-        ? "right-0"
-        : "left-1/2 -translate-x-1/2";
-
   return (
     <span
       ref={triggerRef}
-      className="relative inline-flex items-center ml-1"
+      className="inline-flex items-center ml-1"
       onMouseEnter={() => setVisible(true)}
       onMouseLeave={() => setVisible(false)}
     >
@@ -65,13 +57,21 @@ export default function Tooltip({ text, children }: TooltipProps) {
           ?
         </span>
       )}
-      {visible && (
+      {visible &&
+        createPortal(
           <div
             ref={tooltipRef}
-          className={`absolute z-50 ${positionClasses} ${alignClasses} px-2.5 py-1.5 text-[11px] leading-snug text-[var(--text-primary)] bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded shadow-lg whitespace-normal max-w-[220px] w-max pointer-events-none`}
+            style={{
+              position: "fixed",
+              top: coords.top,
+              left: coords.left,
+              zIndex: 9999,
+            }}
+            className={`px-2.5 py-1.5 text-[11px] leading-snug text-[var(--text-primary)] bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded shadow-lg whitespace-normal max-w-[280px] w-max pointer-events-none`}
           >
             {text}
-        </div>
+          </div>,
+          document.body
         )}
     </span>
   );