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 %}
|
{% for source in recent %}
|
||||||
<a href="/sources/{{ source.id }}"
|
<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">
|
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">
|
<div class="min-w-0 flex-1">
|
||||||
<p class="text-sm font-medium text-gray-900 truncate">{{ source.title }}</p>
|
<p class="text-sm font-medium text-gray-900 break-words">{{ source.title }}</p>
|
||||||
<p class="text-xs text-gray-400 truncate">{{ source.url }}</p>
|
<p class="text-xs text-gray-400 break-all">{{ source.url }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col items-end gap-1 flex-shrink-0">
|
<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
|
<span class="text-xs px-2 py-0.5 rounded-full font-medium
|
||||||
|
|||||||
@ -61,13 +61,15 @@
|
|||||||
<a href="/sources/{{ source.id }}"
|
<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">
|
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">
|
<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">
|
<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 }}
|
{{ source.title }}
|
||||||
</h3>
|
</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 %}
|
{% 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 %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col items-end gap-1.5 flex-shrink-0">
|
<div class="flex flex-col items-end gap-1.5 flex-shrink-0">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user