web: source cards wrap long titles/URLs instead of truncating

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.
This commit is contained in:
Travis Herbranson 2026-05-25 13:22:27 -04:00
parent 956bf8d0c3
commit 29832b3595
2 changed files with 9 additions and 5 deletions

View File

@ -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

View File

@ -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">