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-tauri/src/commands/update_commands.rs

@@ -34,30 +34,37 @@ pub async fn check_for_updates() -> Result<Option<UpdateInfo>, String> {
         .map_err(|e| format!("Failed to parse releases: {}", e))?;
 
     let current_version = env!("CARGO_PKG_VERSION");
-    let is_windows = cfg!(target_os = "windows");
+    let current_semver = parse_semver(current_version).unwrap_or((0, 0, 0));
+
+    // Determine platform suffix for tag filtering
+    let platform_suffix: &str = if cfg!(target_os = "windows") {
+        "-win"
+    } else if cfg!(target_os = "macos") {
+        "-mac"
+    } else {
+        "" // Linux uses bare tags (no suffix)
+    };
 
     // Filter releases by platform tag suffix
     let platform_releases: Vec<&GiteaRelease> = releases
         .iter()
         .filter(|r| {
-            if is_windows {
-                r.tag_name.ends_with("-win")
+            if platform_suffix.is_empty() {
+                // Linux: bare tag only (no -win, no -mac)
+                !r.tag_name.ends_with("-win") && !r.tag_name.ends_with("-mac")
             } else {
-                !r.tag_name.ends_with("-win")
+                r.tag_name.ends_with(platform_suffix)
             }
         })
         .collect();
 
-    // Find the latest release with a higher patch version
-    // Version format: 0.1.X or v0.1.X (tag may have prefix/suffix)
-    let current_patch = parse_patch_version(current_version).unwrap_or(0);
-
-    let mut best: Option<(&GiteaRelease, u32)> = None;
+    // Find the latest release with a higher semver version
+    let mut best: Option<(&GiteaRelease, (u32, u32, u32))> = None;
     for release in &platform_releases {
-        if let Some(patch) = parse_patch_from_tag(&release.tag_name) {
-            if patch > current_patch {
-                if best.is_none() || patch > best.unwrap().1 {
-                    best = Some((release, patch));
+        if let Some(ver) = parse_semver_from_tag(&release.tag_name) {
+            if ver > current_semver {
+                if best.is_none() || ver > best.unwrap().1 {
+                    best = Some((release, ver));
                 }
             }
         }
@@ -92,36 +99,34 @@ pub async fn check_for_updates() -> Result<Option<UpdateInfo>, String> {
     }
 }
 
-/// Parse patch version from a semver string like "0.1.5" -> 5
-fn parse_patch_version(version: &str) -> Option<u32> {
+/// Parse a semver string like "0.2.5" -> (0, 2, 5)
+fn parse_semver(version: &str) -> Option<(u32, u32, u32)> {
     let clean = version.trim_start_matches('v');
     let parts: Vec<&str> = clean.split('.').collect();
     if parts.len() >= 3 {
-        parts[2].parse().ok()
+        let major = parts[0].parse().ok()?;
+        let minor = parts[1].parse().ok()?;
+        let patch = parts[2].parse().ok()?;
+        Some((major, minor, patch))
     } else {
         None
     }
 }
 
-/// Parse patch version from a tag like "v0.1.5", "v0.1.5-win", "0.1.5" -> 5
-fn parse_patch_from_tag(tag: &str) -> Option<u32> {
+/// Parse semver from a tag like "v0.2.5", "v0.2.5-win", "v0.2.5-mac" -> (0, 2, 5)
+fn parse_semver_from_tag(tag: &str) -> Option<(u32, u32, u32)> {
     let clean = tag.trim_start_matches('v');
     // Remove platform suffix
-    let clean = clean.strip_suffix("-win").unwrap_or(clean);
-    parse_patch_version(clean)
+    let clean = clean.strip_suffix("-win")
+        .or_else(|| clean.strip_suffix("-mac"))
+        .unwrap_or(clean);
+    parse_semver(clean)
 }
 
-/// Extract a clean version string from a tag like "v0.1.5-win" -> "0.1.5"
+/// Extract a clean version string from a tag like "v0.2.5-win" -> "0.2.5"
 fn extract_version_from_tag(tag: &str) -> Option<String> {
-    let clean = tag.trim_start_matches('v');
-    let clean = clean.strip_suffix("-win").unwrap_or(clean);
-    // Validate it looks like a version
-    let parts: Vec<&str> = clean.split('.').collect();
-    if parts.len() >= 3 && parts.iter().all(|p| p.parse::<u32>().is_ok()) {
-        Some(clean.to_string())
-    } else {
-        None
-    }
+    let (major, minor, patch) = parse_semver_from_tag(tag)?;
+    Some(format!("{}.{}.{}", major, minor, patch))
 }
 
 /// Check whether a newer container image is available in the registry.

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 [align, setAlign] = useState<"center" | "left" | "right">("center");
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  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 tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const tooltip = tooltipRef.current.getBoundingClientRect();
+    const gap = 6;
 
-    // Decide vertical position: prefer top, fall back to bottom
-    if (triggerRect.top - tooltipRect.height - 6 < 4) {
-      setPosition("bottom");
-    } else {
-      setPosition("top");
-    }
+    // Vertical: prefer above, fall back to below
+    const above = trigger.top - tooltip.height - gap >= 4;
+    const pos = above ? "top" : "bottom";
+    setPlacement(pos);
 
-    // Decide horizontal alignment
-    const centerLeft = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
-    const centerRight = centerLeft + tooltipRect.width;
-    if (centerLeft < 4) {
-      setAlign("left");
-    } else if (centerRight > window.innerWidth - 4) {
-      setAlign("right");
-    } else {
-      setAlign("center");
-    }
+    const top =
+      pos === "top"
+        ? trigger.top - tooltip.height - gap
+        : trigger.bottom + gap;
+
+    // Horizontal: center on trigger, clamp to viewport
+    let left = trigger.left + trigger.width / 2 - tooltip.width / 2;
+    left = Math.max(4, Math.min(left, window.innerWidth - tooltip.width - 4));
+
+    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>
   );