From c74ceaaf8569a0466b53be060ccf19b968fbcbb3 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Thu, 1 Jan 2026 20:39:39 +0100
Subject: [PATCH] fix(nostr-feed): Fix comment threading lines styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change border-* to bg-* classes so threading lines actually display
- Tighten spacing to match Lemmy-style threading (ml-0.5, pl-2, py-1)
- Rename borderColor to depthColor for accuracy

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/SubmissionComment.vue          | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/modules/nostr-feed/components/SubmissionComment.vue b/src/modules/nostr-feed/components/SubmissionComment.vue
index 9a3ea90..b1e4b09 100644
--- a/src/modules/nostr-feed/components/SubmissionComment.vue
+++ b/src/modules/nostr-feed/components/SubmissionComment.vue
@@ -50,19 +50,19 @@ function formatTime(timestamp: number): string {
   return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
 }
 
-// Depth colors for threading lines
+// Depth colors for threading lines (using bg-* since we use width, not border)
 const depthColors = [
-  'border-blue-400',
-  'border-green-400',
-  'border-yellow-400',
-  'border-red-400',
-  'border-purple-400',
-  'border-pink-400',
-  'border-orange-400',
-  'border-cyan-400'
+  'bg-blue-400',
+  'bg-green-400',
+  'bg-yellow-400',
+  'bg-red-400',
+  'bg-purple-400',
+  'bg-pink-400',
+  'bg-orange-400',
+  'bg-cyan-400'
 ]
 
-const borderColor = computed(() => depthColors[props.depth % depthColors.length])
+const depthColor = computed(() => depthColors[props.depth % depthColors.length])
 
 // Is own comment
 const isOwnComment = computed(() =>
@@ -74,7 +74,7 @@ const isOwnComment = computed(() =>
   <div
     :class="[
       'relative',
-      depth > 0 ? 'ml-3' : ''
+      depth > 0 ? 'ml-0.5' : ''
     ]"
   >
     <!-- Threading line -->
@@ -82,7 +82,7 @@ const isOwnComment = computed(() =>
       v-if="depth > 0"
       :class="[
         'absolute left-0 top-0 bottom-0 w-0.5',
-        borderColor,
+        depthColor,
         'hover:w-1 transition-all cursor-pointer'
       ]"
       @click="emit('toggle-collapse', comment.id)"
@@ -91,8 +91,8 @@ const isOwnComment = computed(() =>
     <!-- Comment content -->
     <div
       :class="[
-        'py-2',
-        depth > 0 ? 'pl-3' : '',
+        'py-1',
+        depth > 0 ? 'pl-2' : '',
         'hover:bg-accent/20 transition-colors'
       ]"
     >