From a15d6c0b2c632e53c421daa4836c12ab570e4ee5 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <c.brandau91@gmail.com>
Date: Sun, 28 Jun 2026 02:23:30 +0200
Subject: [PATCH] fix wrong ui

---
 src/app.css                                | 18 ++++++++
 src/lib/components/FileHistoryPanel.svelte | 51 +++++++++++++++++++++-
 2 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 93fd32f..92af3d8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1206,6 +1206,24 @@
   .resolve-path { overflow: hidden; color: var(--color-ink-faint); font-family: var(--font-mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
 }
 
+/* Custom tooltip — appended to body, not clipped by overflow:hidden parents */
+.path-tooltip {
+  position: fixed;
+  z-index: 300;
+  max-width: 480px;
+  padding: 5px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-surface-raised);
+  color: var(--color-ink-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  pointer-events: none;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
+}
+
 @keyframes spin { to { transform: rotate(360deg); } }
 
 /* --- Responsive breakpoints --- */
diff --git a/src/lib/components/FileHistoryPanel.svelte b/src/lib/components/FileHistoryPanel.svelte
index fd977cf..a4fc78f 100644
--- a/src/lib/components/FileHistoryPanel.svelte
+++ b/src/lib/components/FileHistoryPanel.svelte
@@ -27,13 +27,60 @@
     if (Number.isNaN(date.getTime())) return value;
     return new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date);
   }
+
+  function fileName(path: string): string {
+    return path.split("/").pop() ?? path;
+  }
+
+  function pathTooltip(node: HTMLElement, text: string) {
+    let el: HTMLDivElement | null = null;
+
+    function show(e: MouseEvent) {
+      if (!text || !text.includes("/")) return;
+      el = document.createElement("div");
+      el.className = "path-tooltip";
+      el.textContent = text;
+      document.body.appendChild(el);
+      move(e);
+    }
+
+    function move(e: MouseEvent) {
+      if (!el) return;
+      const tw = el.offsetWidth;
+      const left = Math.max(8, Math.min(e.clientX - tw / 2, window.innerWidth - tw - 8));
+      el.style.left = `${left}px`;
+      el.style.top  = `${e.clientY - 44}px`;
+    }
+
+    function hide() {
+      el?.remove();
+      el = null;
+    }
+
+    node.addEventListener("mouseenter", show);
+    node.addEventListener("mousemove", move);
+    node.addEventListener("mouseleave", hide);
+
+    return {
+      update(v: string) { text = v; },
+      destroy() {
+        hide();
+        node.removeEventListener("mouseenter", show);
+        node.removeEventListener("mousemove", move);
+        node.removeEventListener("mouseleave", hide);
+      },
+    };
+  }
 </script>
 
 <section class="panel grid grid-rows-[auto_1fr] overflow-hidden" aria-label="Selected file history">
   <div class="section-head">
-    <div class="min-w-0">
+    <div class="min-w-0 flex-1 overflow-hidden">
       <span class="eyebrow">{selectedExplorerLabel}</span>
-      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight truncate">{selectedExplorerPath || "No file"}</h2>
+      <h2
+        class="mt-0.5 text-ink text-base font-bold leading-tight truncate"
+        use:pathTooltip={selectedExplorerPath}
+      >{selectedExplorerPath ? fileName(selectedExplorerPath) : "No file"}</h2>
     </div>
     <span class="pill pill-count flex-shrink-0">{fileHistory.length}</span>
   </div>