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'
       ]"
     >