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:
parent
956bf8d0c3
commit
29832b3595
@ -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
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user