From 74fcb554340aa67d14f25e4df88195e50965c6b7 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Tue, 30 Aug 2022 02:29:57 -0700
Subject: [PATCH] Fix some free response UI stuff up

---
 web/components/feed/contract-activity.tsx     |  5 +--
 .../feed/feed-answer-comment-group.tsx        | 32 ++++++++++---------
 web/components/feed/feed-comments.tsx         |  2 +-
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/web/components/feed/contract-activity.tsx b/web/components/feed/contract-activity.tsx
index 7b451cc9..744f06aa 100644
--- a/web/components/feed/contract-activity.tsx
+++ b/web/components/feed/contract-activity.tsx
@@ -105,8 +105,9 @@ export function FreeResponseContractCommentsActivity(props: {
   const { bets, contract, comments, user, tips } = props
 
   let outcomes = uniq(bets.map((bet) => bet.outcome))
-  outcomes = sortBy(outcomes, (outcome) =>
-    getOutcomeProbability(contract, outcome)
+  outcomes = sortBy(
+    outcomes,
+    (outcome) => -getOutcomeProbability(contract, outcome)
   )
 
   const answers = outcomes
diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx
index 1f3467ea..2df8cb4a 100644
--- a/web/components/feed/feed-answer-comment-group.tsx
+++ b/web/components/feed/feed-answer-comment-group.tsx
@@ -107,12 +107,12 @@ export function FeedAnswerCommentGroup(props: {
 
   return (
     <Col
-      className={'relative flex-1 items-start gap-3'}
+      className={'relative flex-1 items-stretch gap-3'}
       key={answer.id + 'comment'}
     >
       <Row
         className={clsx(
-          'flex gap-3 space-x-3 pt-4 transition-all duration-1000',
+          'gap-3 space-x-3 pt-4 transition-all duration-1000',
           highlighted ? `-m-2 my-3 rounded bg-indigo-500/[0.2] p-2` : ''
         )}
         id={answerElementId}
@@ -158,21 +158,23 @@ export function FeedAnswerCommentGroup(props: {
           )}
         </Col>
       </Row>
-      {answerComments.map((comment) => (
-        <FeedComment
-          key={comment.id}
-          indent={true}
-          contract={contract}
-          comment={comment}
-          tips={tips[comment.id]}
-          betsBySameUser={betsByUserId[comment.userId] ?? []}
-          onReplyClick={scrollAndOpenReplyInput}
-        />
-      ))}
+      <Col className="gap-3 pl-1">
+        {answerComments.map((comment) => (
+          <FeedComment
+            key={comment.id}
+            indent={true}
+            contract={contract}
+            comment={comment}
+            tips={tips[comment.id]}
+            betsBySameUser={betsByUserId[comment.userId] ?? []}
+            onReplyClick={scrollAndOpenReplyInput}
+          />
+        ))}
+      </Col>
       {showReply && (
-        <div className={'ml-6'}>
+        <div className={'relative ml-7'}>
           <span
-            className="absolute -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90 bg-gray-200"
+            className="absolute -left-1 -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90 bg-gray-200"
             aria-hidden="true"
           />
           <CommentInput
diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx
index cc0b77d0..9e6c3cd5 100644
--- a/web/components/feed/feed-comments.tsx
+++ b/web/components/feed/feed-comments.tsx
@@ -155,7 +155,7 @@ export function FeedComment(props: {
     <Row
       id={comment.id}
       className={clsx(
-        'relative flex',
+        'relative',
         indent ? 'ml-6' : '',
         highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
       )}