More cleanup and fix some styling I had broken

web/components/contract/contract-leaderboard.tsx

@@ -107,7 +107,6 @@ export function ContractTopTrades(props: {
               comment={commentsById[topCommentId]}
               tips={tips[topCommentId]}
               betsBySameUser={[betsById[topCommentId]]}
-              smallAvatar={false}
             />
           </div>
           <div className="mt-2 text-sm text-gray-500">

web/components/feed/contract-activity.tsx

@@ -71,21 +71,16 @@ export function ContractCommentsActivity(props: {
   )
 
   return (
-    <div>
+    <>
       <CommentInput
+        className="mb-5"
         contract={contract}
         betsByCurrentUser={(user && betsByUserId[user.id]) ?? []}
         commentsByCurrentUser={(user && commentsByUserId[user.id]) ?? []}
       />
-      {topLevelComments.map((parent, idx) => (
+      {topLevelComments.map((parent) => (
-        <div key={parent.id} className={'relative pb-4'}>
-          {idx !== topLevelComments.length - 1 ? (
-            <span
-              className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
-              aria-hidden="true"
-            />
-          ) : null}
         <FeedCommentThread
+          key={parent.id}
           user={user}
           contract={contract}
           parentComment={parent}
@@ -95,9 +90,8 @@ export function ContractCommentsActivity(props: {
           betsByUserId={betsByUserId}
           commentsByUserId={commentsByUserId}
         />
-        </div>
       ))}
-    </div>
+    </>
   )
 }
 
@@ -126,7 +120,7 @@ export function FreeResponseContractCommentsActivity(props: {
   const commentsByOutcome = groupBy(comments, (c) => c.answerOutcome ?? '_')
 
   return (
-    <div>
+    <>
       {answers.map((answer) => (
         <div key={answer.id} className={'relative pb-4'}>
           <span
@@ -144,6 +138,6 @@ export function FreeResponseContractCommentsActivity(props: {
           />
         </div>
       ))}
-    </div>
+    </>
   )
 }

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

@@ -167,7 +167,6 @@ export function FeedAnswerCommentGroup(props: {
           tips={tips[comment.id]}
           betsBySameUser={betsByUserId[comment.userId] ?? []}
           onReplyClick={scrollAndOpenReplyInput}
-          smallAvatar={true}
         />
       ))}
       {showReply && (

web/components/feed/feed-bets.tsx

@@ -28,7 +28,7 @@ export function FeedBet(props: { contract: Contract; bet: Bet }) {
   const isSelf = user?.id === userId
 
   return (
-    <Row className="flex w-full items-center gap-2 pt-3">
+    <Row className="items-center gap-2 pt-3">
       {isSelf ? (
         <Avatar avatarUrl={user.avatarUrl} username={user.username} />
       ) : bettor ? (

web/components/feed/feed-comments.tsx

@@ -59,9 +59,9 @@ export function FeedCommentThread(props: {
   }
 
   return (
-    <Col className={'relative w-full items-start gap-3 pr-1'}>
+    <Col className="relative w-full items-stretch gap-3 pb-4">
       <span
-        className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
+        className="absolute top-5 left-4 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
         aria-hidden="true"
       />
       {[parentComment].concat(threadComments).map((comment, commentIdx) => (
@@ -85,9 +85,9 @@ export function FeedCommentThread(props: {
         />
       ))}
       {showReply && (
-        <Col className={'-pb-2 ml-6'}>
+        <Col className="-pb-2 relative ml-6">
           <span
-            className="absolute -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
+            className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
             aria-hidden="true"
           />
           <CommentInput
@@ -112,7 +112,6 @@ export function FeedComment(props: {
   betsBySameUser: Bet[]
   indent?: boolean
   probAtCreatedTime?: number
-  smallAvatar?: boolean
   onReplyClick?: (comment: ContractComment) => void
 }) {
   const {
@@ -156,7 +155,7 @@ export function FeedComment(props: {
     <Row
       id={comment.id}
       className={clsx(
-        'relative flex space-x-1.5 sm:space-x-3',
+        'relative flex',
         indent ? 'ml-6' : '',
         highlighted ? `-m-1 rounded bg-indigo-500/[0.2] p-2` : ''
       )}
@@ -164,17 +163,12 @@ export function FeedComment(props: {
       {/*draw a gray line from the comment to the left:*/}
       {indent ? (
         <span
-          className="absolute -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
+          className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
           aria-hidden="true"
         />
       ) : null}
-      <Avatar
+      <Avatar size="sm" username={userUsername} avatarUrl={userAvatarUrl} />
-        className={'ml-1'}
+      <div className="ml-1.5 min-w-0 flex-1 sm:ml-3">
-        size={'sm'}
-        username={userUsername}
-        avatarUrl={userAvatarUrl}
-      />
-      <div className="min-w-0 flex-1">
         <div className="mt-0.5 pl-0.5 text-sm text-gray-500">
           <UserLink
             className="text-gray-500"
@@ -282,6 +276,7 @@ export function CommentInput(props: {
   contract: Contract
   betsByCurrentUser: Bet[]
   commentsByCurrentUser: ContractComment[]
+  className?: string
   replyToUser?: { id: string; username: string }
   // Reply to a free response answer
   parentAnswerOutcome?: string
@@ -293,6 +288,7 @@ export function CommentInput(props: {
     contract,
     betsByCurrentUser,
     commentsByCurrentUser,
+    className,
     parentAnswerOutcome,
     parentCommentId,
     replyToUser,
@@ -347,18 +343,14 @@ export function CommentInput(props: {
   if (user?.isBannedFromPosting) return <></>
 
   return (
-    <>
+    <Row className={clsx(className, 'mb-2 gap-1 sm:gap-2')}>
-      <Row className={'mb-2 gap-1 sm:gap-2'}>
-        <div className={'mt-2'}>
       <Avatar
         avatarUrl={user?.avatarUrl}
         username={user?.username}
-            size={'sm'}
+        size="sm"
-            className={'ml-1'}
+        className="mt-2"
       />
-        </div>
+      <div className="min-w-0 flex-1 pl-0.5 text-sm">
-        <div className={'min-w-0 flex-1'}>
-          <div className="pl-0.5 text-sm">
         <div className="mb-1 text-gray-500">
           {mostRecentCommentableBet && (
             <BetStatusText
@@ -370,10 +362,7 @@ export function CommentInput(props: {
               }
             />
           )}
-              {!mostRecentCommentableBet &&
+          {!mostRecentCommentableBet && user && userPosition > 0 && !isNumeric && (
-                user &&
-                userPosition > 0 &&
-                !isNumeric && (
             <>
               {"You're"}
               <CommentStatus
@@ -398,9 +387,7 @@ export function CommentInput(props: {
           presetId={id}
         />
       </div>
-        </div>
     </Row>
-    </>
   )
 }
 
@@ -476,7 +463,6 @@ export function CommentInputTextArea(props: {
 
   return (
     <>
-      <div>
       <TextEditor editor={editor} upload={upload}>
         {user && !isSubmitting && (
           <button
@@ -492,7 +478,6 @@ export function CommentInputTextArea(props: {
           <LoadingIndicator spinnerClassName={'border-gray-500'} />
         )}
       </TextEditor>
-      </div>
       <Row>
         {!user && (
           <button
@@ -517,10 +502,6 @@ function getBettorsLargestPositionBeforeTime(
     noShares = 0,
     noFloorShares = 0
 
-  const emptyReturn = {
-    userPosition: 0,
-    outcome: '',
-  }
   const previousBets = bets.filter(
     (prevBet) => prevBet.createdTime < createdTime && !prevBet.isAnte
   )
@@ -544,7 +525,7 @@ function getBettorsLargestPositionBeforeTime(
     }
   }
   if (bets.length === 0) {
-    return emptyReturn
+    return { userPosition: 0, outcome: '' }
   }
 
   const [yesBets, noBets] = partition(