From b1d138ce60502d58e18a59b812c54f14f5281e53 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 28 Mar 2026 11:46:47 +0100
Subject: [PATCH] Refactor community question comments display

- Adjusted spacing for the comments section for better visual alignment.
- Wrapped comments rendering in a conditional to ensure proper display only when comments exist.
- Maintained functionality for upvoting and deleting comments while improving code readability.
---
 .../community/pages/community-question.svelte | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/apps/dashboard/src/lib/features/community/pages/community-question.svelte b/apps/dashboard/src/lib/features/community/pages/community-question.svelte
index 8975edbb..43201ecc 100644
--- a/apps/dashboard/src/lib/features/community/pages/community-question.svelte
+++ b/apps/dashboard/src/lib/features/community/pages/community-question.svelte
@@ -223,35 +223,37 @@
           {/if}
         </div>
 
-        <div class="my-8">
+        <div class="my-2">
           {pluralize($t('community.answers'), communityApi.question?.comments.length ?? 0, true)}
         </div>
 
-        <div class="space-y-2">
-          {#each communityApi.question?.comments as commentItem (commentItem.id)}
-            <CommunityCommentItem
-              comment={commentItem}
-              isVoted={!!voted.comment[commentItem.id]}
-              {isValidAnswer}
-              isAuthorOrAdmin={commentItem.author?.id === $profile.id || $isOrgAdmin === true}
-              upVote={() => {
-                if (voted.comment[commentItem.id]) return;
+        {#if !!communityApi.question?.comments?.length}
+          <div class="space-y-2">
+            {#each communityApi.question?.comments as commentItem (commentItem.id)}
+              <CommunityCommentItem
+                comment={commentItem}
+                isVoted={!!voted.comment[commentItem.id]}
+                {isValidAnswer}
+                isAuthorOrAdmin={commentItem.author?.id === $profile.id || $isOrgAdmin === true}
+                upVote={() => {
+                  if (voted.comment[commentItem.id]) return;
 
-                voted.comment[commentItem.id] = true;
+                  voted.comment[commentItem.id] = true;
 
-                communityApi.upvotePost({
-                  id: commentItem.id,
-                  isQuestion: false
-                });
-              }}
-              onDelete={() => {
-                console.log('deleting commentItem', commentItem);
-                communityApi.deleteCommentState.shouldDelete = true;
-                communityApi.deleteCommentState.commentId = commentItem.id;
-              }}
-            />
-          {/each}
-        </div>
+                  communityApi.upvotePost({
+                    id: commentItem.id,
+                    isQuestion: false
+                  });
+                }}
+                onDelete={() => {
+                  console.log('deleting commentItem', commentItem);
+                  communityApi.deleteCommentState.shouldDelete = true;
+                  communityApi.deleteCommentState.commentId = commentItem.id;
+                }}
+              />
+            {/each}
+          </div>
+        {/if}
 
         <hr />