From 13f728bcd6fcf97d228a1265953524a0ba6f77e6 Mon Sep 17 00:00:00 2001
From: ritte <peter@cygnus.systems>
Date: Fri, 24 Jul 2026 10:28:12 +0200
Subject: [PATCH] Add title tooltip and widen artifact-list resize range

- Preview control-bar title now shows a native tooltip with the full
  text on hover, so titles truncated by ellipsis are still readable.
  Wired into the server render and both JS update paths.
- Splitter resize bounds are now per-pane: the artifact list can grow
  up to 720px (was a shared 420px cap that made it feel un-draggable to
  the right), while the sources sidebar stays 96-320px.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 templates/artifacts/feed.html | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/templates/artifacts/feed.html b/templates/artifacts/feed.html
index fc6d806..447fec0 100644
--- a/templates/artifacts/feed.html
+++ b/templates/artifacts/feed.html
@@ -59,7 +59,7 @@
 
     <section class="preview-pane">
       <header class="pane-bar preview-actions" data-actions>
-        <div class="preview-title" data-preview-title>
+        <div class="preview-title" data-preview-title {% if selected_artifact %}title="{{ selected_artifact.title }}"{% endif %}>
           {% if selected_artifact %}{{ selected_artifact.title }}{% else %}No artifact loaded{% endif %}
         </div>
         <nav class="view-toggle" aria-label="Preview mode">
@@ -126,16 +126,24 @@
 
       applySizes();
 
+      // Per-pane resize bounds. The artifact list may grow much wider than the
+      // sources sidebar, but is still capped so it can't swallow the preview.
+      const sizeBounds = {
+        days: {min: 96, max: 320},
+        artifacts: {min: 200, max: 720},
+      };
+
       document.querySelectorAll(".splitter").forEach((splitter) => {
         splitter.addEventListener("pointerdown", (event) => {
           const target = splitter.dataset.splitter;
           const startX = event.clientX;
           const startWidth = sizes[target];
+          const bounds = sizeBounds[target];
           splitter.setPointerCapture(event.pointerId);
           document.body.classList.add("is-resizing");
 
           const move = (moveEvent) => {
-            sizes[target] = Math.max(96, Math.min(420, startWidth + moveEvent.clientX - startX));
+            sizes[target] = Math.max(bounds.min, Math.min(bounds.max, startWidth + moveEvent.clientX - startX));
             applySizes();
           };
 
@@ -203,7 +211,10 @@
         const actions = document.querySelector("[data-actions]");
         if (!actions) return;
         const previewTitle = actions.querySelector("[data-preview-title]");
-        if (previewTitle) previewTitle.textContent = row.dataset.title;
+        if (previewTitle) {
+          previewTitle.textContent = row.dataset.title;
+          previewTitle.title = row.dataset.title;
+        }
         actions.querySelectorAll("[data-view]").forEach((link) => {
           const view = link.dataset.view;
           link.classList.toggle("selected", view === selectedView);
@@ -256,7 +267,10 @@
         const actions = document.querySelector("[data-actions]");
         if (!actions) return;
         const previewTitle = actions.querySelector("[data-preview-title]");
-        if (previewTitle) previewTitle.textContent = "No artifact loaded";
+        if (previewTitle) {
+          previewTitle.textContent = "No artifact loaded";
+          previewTitle.removeAttribute("title");
+        }
         actions.querySelectorAll("[data-view]").forEach((link) => {
           link.classList.add("disabled");
           link.setAttribute("aria-disabled", "true");