appview/pages: restyle issue comment list

reduces the left margin by placing profile pictures halfway over the
vertical line. this mimics gh discussions design.

appview/pages/templates/repo/issues/fragments/commentList.html

···
 {{ define "repo/issues/fragments/commentList" }}
-  <div class="flex flex-col gap-8">
+  <div class="flex flex-col gap-4">
     {{ range $item := .CommentList }}
       {{ template "commentListing" (list $ .) }}
     {{ end }}
···
   <div class="rounded border border-gray-200 dark:border-gray-700 w-full overflow-hidden shadow-sm bg-gray-50 dark:bg-gray-800/50">
     {{ template "topLevelComment" $params }}
 
-    <div class="relative ml-4 border-l-2 border-gray-200 dark:border-gray-700">
+    <div class="relative ml-10 border-l-2 border-gray-200 dark:border-gray-700">
       {{ range $index, $reply := $comment.Replies }}
-        <div class="relative ">
-          <!-- Horizontal connector -->
-          <div class="absolute left-0 top-6 w-4 h-1 bg-gray-200 dark:bg-gray-700"></div>
-
-          <div class="pl-2">
-            {{
-              template "replyComment"
-              (dict
-                "RepoInfo" $root.RepoInfo
-                "LoggedInUser" $root.LoggedInUser
-                "Issue" $root.Issue
-                "Comment" $reply)
-            }}
-          </div>
+        <div class="-ml-4">
+          {{
+            template "replyComment"
+            (dict
+              "RepoInfo" $root.RepoInfo
+              "LoggedInUser" $root.LoggedInUser
+              "Issue" $root.Issue
+              "Comment" $reply)
+          }}
         </div>
       {{ end }}
     </div>
···
 {{ end }}
 
 {{ define "topLevelComment" }}
-<div class="rounded px-6 py-4 bg-white dark:bg-gray-800">
-  {{ template "repo/issues/fragments/issueCommentHeader" . }}
-  {{ template "repo/issues/fragments/issueCommentBody" . }}
+<div class="rounded px-6 py-4 bg-white dark:bg-gray-800 flex gap-2 ">
+  <div class="flex-shrink-0">
+    <img
+        src="{{ tinyAvatar .Comment.Did }}"
+        alt=""
+        class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
+    />
+  </div>
+  <div class="flex-1 min-w-0">
+    {{ template "repo/issues/fragments/issueCommentHeader" . }}
+    {{ template "repo/issues/fragments/issueCommentBody" . }}
+  </div>
 </div>
 {{ end }}
 
 {{ define "replyComment" }}
-<div class="p-4 w-full mx-auto overflow-hidden">
-  {{ template "repo/issues/fragments/issueCommentHeader" . }}
-  {{ template "repo/issues/fragments/issueCommentBody" . }}
+<div class="py-4 pr-4 w-full mx-auto overflow-hidden flex gap-2 ">
+  <div class="flex-shrink-0">
+    <img
+        src="{{ tinyAvatar .Comment.Did }}"
+        alt=""
+        class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
+    />
+  </div>
+  <div class="flex-1 min-w-0">
+    {{ template "repo/issues/fragments/issueCommentHeader" . }}
+    {{ template "repo/issues/fragments/issueCommentBody" . }}
+  </div>
 </div>
 {{ end }}

appview/pages/templates/repo/issues/fragments/issueCommentHeader.html

···
 {{ define "repo/issues/fragments/issueCommentHeader" }}
   <div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400 ">
-    {{ template "user/fragments/picHandleLink" .Comment.Did }}
+    {{ resolve .Comment.Did }}
     {{ template "hats" $ }}
+    <span class="before:content-['·']"></span>
     {{ template "timestamp" . }}
     {{ $isCommentOwner := and .LoggedInUser (eq .LoggedInUser.Did .Comment.Did) }}
     {{ if and $isCommentOwner (not .Comment.Deleted) }}

appview/pages/templates/repo/issues/fragments/putIssue.html

···
       <textarea
         name="body"
         id="body"
-        rows="6"
+        rows="15"
         class="w-full resize-y"
         placeholder="Describe your issue. Markdown is supported."
         >{{ if .Issue }}{{ .Issue.Body }}{{ end }}</textarea>

appview/pages/templates/repo/issues/fragments/replyIssueCommentPlaceholder.html

···
 {{ define "repo/issues/fragments/replyIssueCommentPlaceholder" }}
-  <div class="p-2 border-t flex gap-2 items-center border-gray-300 dark:border-gray-700">
+  <div class="py-2 px-6 border-t flex gap-2 items-center border-gray-300 dark:border-gray-700">
     {{ if .LoggedInUser }}
       <img
           src="{{ tinyAvatar .LoggedInUser.Did }}"
           alt=""
-          class="rounded-full h-6 w-6 mr-1 border border-gray-300 dark:border-gray-700"
+          class="rounded-full size-8 mr-1 border-2 border-gray-300 dark:border-gray-700"
       />
     {{ end }}
     <input
-      class="w-full py-2 border-none focus:outline-none"
+      class="w-full p-0 border-none focus:outline-none"
       placeholder="Leave a reply..."
       hx-get="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment/{{ .Comment.Id }}/reply"
       hx-trigger="focus"