no more indent on answer response

web/components/comment-input.tsx

@@ -13,6 +13,7 @@ import { Avatar } from './avatar'
 import { TextEditor, useTextEditor } from './editor'
 import { CommentsAnswer } from './feed/feed-answer-comment-group'
 import { ContractCommentInput } from './feed/feed-comments'
+import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
 
@@ -93,17 +94,19 @@ export function AnswerCommentInput(props: {
   const color = getAnswerColor(answerResponse, answersArray)
   return (
     <>
-      <div className="opacity-60">
+      <Col>
-        <CommentsAnswer
+        <Row className="relative">
-          answer={answerResponse}
+          <div className="absolute -bottom-1 left-1.5">
-          contract={contract}
+            <Curve size={32} strokeWidth={1} color="#D8D8EB" />
-          color={color}
+          </div>
-        />
+          <div className="ml-[38px]">
-      </div>
+            <CommentsAnswer
-      <Row>
+              answer={answerResponse}
-        <div className="ml-1">
+              contract={contract}
-          <Curve size={28} strokeWidth={1} color="#D8D8EB" />
+              color={color}
-        </div>
+            />
+          </div>
+        </Row>
         <div className="relative w-full pt-1">
           <ContractCommentInput
             contract={contract}
@@ -116,7 +119,7 @@ export function AnswerCommentInput(props: {
             <XCircleIcon className="text-greyscale-5 hover:text-greyscale-6 absolute -top-1 -right-2 h-5 w-5" />
           </button>
         </div>
-      </Row>
+      </Col>
     </>
   )
 }

web/components/contract/contract-tabs.tsx

@@ -156,7 +156,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
           tips={tips}
         />
       )}
-      {contract.outcomeType != 'FREE_RESPONSE' &&
+      {contract.outcomeType !== 'FREE_RESPONSE' &&
         topLevelComments.map((parent) => (
           <FeedCommentThread
             key={parent.id}

web/components/feed/feed-answer-comment-group.tsx

@@ -53,10 +53,10 @@ export function CommentsAnswer(props: {
           background: color ? color : '#B1B1C7',
         }}
       />
-      <Col className="w-fit gap-1 bg-gray-100 py-2 pl-2 pr-4">
+      <Col className="w-fit bg-gray-100 py-1 pl-2 pr-2">
         <Row className="gap-2">
-          <Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
+          {/* <Avatar username={username} avatarUrl={avatarUrl} size="xxs" /> */}
-          <div className="text-greyscale-6 text-xs">
+          <div className="text-greyscale-4 text-xs">
             <UserLink username={username} name={name} /> answered
             <CopyLinkDateTimeComponent
               prefix={contract.creatorUsername}
@@ -88,9 +88,7 @@ export function FreeResponseComments(props: {
     commentsByParent,
     tips,
   } = props
-  const answersArray = useChartAnswers(contract).map(
+  const answersArray = useChartAnswers(contract).map((answer) => answer.text)
-    (answer, _index) => answer.text
-  )
   return (
     <>
       {answerResponse && (
@@ -126,30 +124,30 @@ export function FreeResponseComments(props: {
         const color = getAnswerColor(answer, answersArray)
         return (
           <>
-            <Row className="gap-2">
+            <Row className="relative">
-              <CommentsAnswer
+              <div className="absolute -bottom-1 left-1.5">
-                answer={answer}
+                <Curve size={32} strokeWidth={1} color="#D8D8EB" />
-                contract={contract}
-                color={color}
-              />
-            </Row>
-            <Row>
-              <div className="ml-1">
-                <Curve size={28} strokeWidth={1} color="#D8D8EB" />
               </div>
-              <div className="w-full pt-1">
+              <div className="ml-[38px]">
-                <FeedCommentThread
+                <CommentsAnswer
-                  key={parent.id}
+                  answer={answer}
                   contract={contract}
-                  parentComment={parent}
+                  color={color}
-                  threadComments={sortBy(
-                    commentsByParent[parent.id] ?? [],
-                    (c) => c.createdTime
-                  )}
-                  tips={tips}
                 />
               </div>
             </Row>
+            <div className="w-full pt-1">
+              <FeedCommentThread
+                key={parent.id}
+                contract={contract}
+                parentComment={parent}
+                threadComments={sortBy(
+                  commentsByParent[parent.id] ?? [],
+                  (c) => c.createdTime
+                )}
+                tips={tips}
+              />
+            </div>
           </>
         )
       })}

web/public/custom-components/curve.tsx

@@ -12,6 +12,7 @@ export default function Curve({
       fill="none"
       stroke={color}
       strokeWidth={strokeWidth}
+      transform="rotate(90)"
     >
       <path d="M5.02,0V5.24c0,4.3,3.49,7.79,7.79,7.79h5.2" />
     </svg>