From 29832b3595a96dcec5bb60e3ab782c2080fb79ff Mon Sep 17 00:00:00 2001
From: Travis Herbranson <tjherbranson@gmail.com>
Date: Mon, 25 May 2026 13:22:27 -0400
Subject: [PATCH] web: source cards wrap long titles/URLs instead of truncating
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Travis prefers the cards to auto-resize to their content rather than
ellipsis-clip the title + URL into a single line. Two places use the
same card markup — both updated:

- src/second_brain/web/templates/index.html — main sources list.
- src/second_brain/web/templates/_dashboard_body.html — recent activity
  on the dashboard.

Changes are minimal and identical on both:
- title h3/p: drop `truncate`, add `break-words` so normal long titles
  wrap at word boundaries.
- URL p: drop `truncate`, add `break-all` because URLs are typically
  one unbreakable token and `break-words` alone wouldn't split them.
- `min-w-0 flex-1` on the left container kept — it lets the flex child
  shrink so the right column's status / domain / timestamp badges stay
  pinned and never get pushed off-screen by a long URL.
- The optional Focus line also gets `break-words` defensively.

Verified live on the rebuilt web container:
- /dashboard: 0 truncate hits in the response, RepoWise URL renders
  intact with break-all applied.
- /?status=analyzed: 0 truncate hits, title + URL both carry the
  new wrap classes.
---
 src/second_brain/web/templates/_dashboard_body.html | 6 ++++--
 src/second_brain/web/templates/index.html           | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/second_brain/web/templates/_dashboard_body.html b/src/second_brain/web/templates/_dashboard_body.html
index f1d34ec..dfc1133 100644
--- a/src/second_brain/web/templates/_dashboard_body.html
+++ b/src/second_brain/web/templates/_dashboard_body.html
@@ -189,9 +189,11 @@
                 {% for source in recent %}
                 <a href="/sources/{{ source.id }}"
                    class="flex items-start justify-between gap-3 py-2.5 hover:bg-gray-50 -mx-2 px-2 rounded transition-colors">
+                    {# Wrap long titles/URLs instead of truncating. min-w-0
+                       keeps the flex child shrinkable so badges stay aligned. #}
                     <div class="min-w-0 flex-1">
-                        <p class="text-sm font-medium text-gray-900 truncate">{{ source.title }}</p>
-                        <p class="text-xs text-gray-400 truncate">{{ source.url }}</p>
+                        <p class="text-sm font-medium text-gray-900 break-words">{{ source.title }}</p>
+                        <p class="text-xs text-gray-400 break-all">{{ source.url }}</p>
                     </div>
                     <div class="flex flex-col items-end gap-1 flex-shrink-0">
                         <span class="text-xs px-2 py-0.5 rounded-full font-medium
diff --git a/src/second_brain/web/templates/index.html b/src/second_brain/web/templates/index.html
index 9dd3dcf..550c241 100644
--- a/src/second_brain/web/templates/index.html
+++ b/src/second_brain/web/templates/index.html
@@ -61,13 +61,15 @@
     <a href="/sources/{{ source.id }}"
        class="block bg-white rounded-lg border border-gray-200 p-4 hover:border-indigo-400 hover:shadow-sm transition-all duration-150 group">
         <div class="flex items-start justify-between gap-4">
+            {# min-w-0 keeps this flex child shrinkable; break-words / break-all
+               make the text wrap inside instead of forcing the parent wider. #}
             <div class="flex-1 min-w-0">
-                <h3 class="font-semibold text-gray-900 group-hover:text-indigo-700 truncate">
+                <h3 class="font-semibold text-gray-900 group-hover:text-indigo-700 break-words">
                     {{ source.title }}
                 </h3>
-                <p class="text-xs text-gray-400 mt-0.5 truncate">{{ source.url }}</p>
+                <p class="text-xs text-gray-400 mt-0.5 break-all">{{ source.url }}</p>
                 {% if source.focus %}
-                <p class="text-xs text-gray-500 mt-1 italic">Focus: {{ source.focus }}</p>
+                <p class="text-xs text-gray-500 mt-1 italic break-words">Focus: {{ source.focus }}</p>
                 {% endif %}
             </div>
             <div class="flex flex-col items-end gap-1.5 flex-shrink-0">