fix: improve comment display in activity feed

Changed comment layout to use block-level elements and fixed entity link
to navigate to the specific item instead of the list page.

Template changes:
- Wrapped icon and text in activity-comment-header div
- Changed entity link to include entityId: ['/' + entityType + 's', entityId]
- Comment preview now displays as a block element below the header

CSS changes:
- Added flex layout to activity-comment-header (inline display)
- Changed activity-comment to flex column layout (block display)
- Added left margin to comment-preview to align with content above
- Removed italic style from comment-preview

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-20 00:15:02 -08:00
parent 6ef787a3b8
commit b8d3365158
@@ -91,13 +91,15 @@ import { SanitizeService } from '../../services/sanitize.service';
} }
@case (ActivityType.comment) { @case (ActivityType.comment) {
<div class="activity-comment"> <div class="activity-comment">
<span class="activity-icon">💬</span> <div class="activity-comment-header">
<span class="activity-text"> <span class="activity-icon">💬</span>
commented on <span class="activity-text">
<a [routerLink]="['/' + activity.entityType + 's']" class="entity-link"> commented on
{{ activity.entityTitle }} <a [routerLink]="['/' + activity.entityType + 's', activity.entityId]" class="entity-link">
</a> {{ activity.entityTitle }}
</span> </a>
</span>
</div>
<div class="comment-preview" [innerHTML]="sanitizeService.sanitizeHtml(activity.commentPreview)"></div> <div class="comment-preview" [innerHTML]="sanitizeService.sanitizeHtml(activity.commentPreview)"></div>
</div> </div>
} }
@@ -256,13 +258,19 @@ import { SanitizeService } from '../../services/sanitize.service';
.activity-suggestion, .activity-suggestion,
.activity-like, .activity-like,
.activity-comment, .activity-comment-header,
.activity-achievement { .activity-achievement {
display: flex; display: flex;
align-items: start; align-items: start;
gap: 0.75rem; gap: 0.75rem;
} }
.activity-comment {
display: flex;
flex-direction: column;
gap: 0;
}
.activity-icon { .activity-icon {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1; line-height: 1;
@@ -290,12 +298,12 @@ import { SanitizeService } from '../../services/sanitize.service';
.comment-preview { .comment-preview {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-left: 55px;
padding: 0.75rem; padding: 0.75rem;
background: #f9fafb; background: #f9fafb;
border-left: 3px solid #10b981; border-left: 3px solid #10b981;
border-radius: 4px; border-radius: 4px;
color: #4b5563; color: #4b5563;
font-style: italic;
} }
.status-badge { .status-badge {