From b8d33651584038e6667973efd49512f4e8940881 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Fri, 20 Feb 2026 00:15:02 -0800
Subject: [PATCH] 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>
---
 .../activity/activity-feed.component.ts       | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/app/components/activity/activity-feed.component.ts b/apps/frontend/src/app/components/activity/activity-feed.component.ts
index 47be73f..927fac9 100644
--- a/apps/frontend/src/app/components/activity/activity-feed.component.ts
+++ b/apps/frontend/src/app/components/activity/activity-feed.component.ts
@@ -91,13 +91,15 @@ import { SanitizeService } from '../../services/sanitize.service';
                   }
                   @case (ActivityType.comment) {
                     <div class="activity-comment">
-                      <span class="activity-icon">💬</span>
-                      <span class="activity-text">
-                        commented on
-                        <a [routerLink]="['/' + activity.entityType + 's']" class="entity-link">
-                          {{ activity.entityTitle }}
-                        </a>
-                      </span>
+                      <div class="activity-comment-header">
+                        <span class="activity-icon">💬</span>
+                        <span class="activity-text">
+                          commented on
+                          <a [routerLink]="['/' + activity.entityType + 's', activity.entityId]" class="entity-link">
+                            {{ activity.entityTitle }}
+                          </a>
+                        </span>
+                      </div>
                       <div class="comment-preview" [innerHTML]="sanitizeService.sanitizeHtml(activity.commentPreview)"></div>
                     </div>
                   }
@@ -256,13 +258,19 @@ import { SanitizeService } from '../../services/sanitize.service';
 
     .activity-suggestion,
     .activity-like,
-    .activity-comment,
+    .activity-comment-header,
     .activity-achievement {
       display: flex;
       align-items: start;
       gap: 0.75rem;
     }
 
+    .activity-comment {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
     .activity-icon {
       font-size: 1.5rem;
       line-height: 1;
@@ -290,12 +298,12 @@ import { SanitizeService } from '../../services/sanitize.service';
 
     .comment-preview {
       margin-top: 0.5rem;
+      margin-left: 55px;
       padding: 0.75rem;
       background: #f9fafb;
       border-left: 3px solid #10b981;
       border-radius: 4px;
       color: #4b5563;
-      font-style: italic;
     }
 
     .status-badge {