addressing James's comments

web/components/comment-input.tsx

@@ -83,10 +83,10 @@ export function AnswerCommentInput(props: {
   onCancelAnswerResponse?: () => void
 }) {
   const { contract, answerResponse, onCancelAnswerResponse } = props
-  const [replyTo, _setReplyTo] = useState<ReplyTo>({
+  const replyTo = {
     id: answerResponse.id,
     username: answerResponse.username,
-  })
+  }
 
   return (
     <>

web/components/comments/comments.tsx

@@ -1,29 +0,0 @@
-import clsx from 'clsx'
-import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
-import { Row } from '../layout/row'
-
-export function ReplyToggle(props: {
-  seeReplies: boolean
-  numComments: number
-  onClick: () => void
-}) {
-  const { seeReplies, numComments, onClick } = props
-  return (
-    <button
-      className={clsx(
-        'text-left text-sm text-indigo-600',
-        numComments === 0 ? 'hidden' : ''
-      )}
-      onClick={onClick}
-    >
-      <Row className="items-center gap-1">
-        <div>
-          {numComments} {numComments === 1 ? 'Reply' : 'Replies'}
-        </div>
-        <TriangleDownFillIcon
-          className={clsx('h-2 w-2', seeReplies ? 'rotate-180' : '')}
-        />
-      </Row>
-    </button>
-  )
-}

web/components/contract/contract-tabs.tsx

@@ -6,7 +6,7 @@ import { CommentsAnswer } from '../feed/feed-answer-comment-group'
 import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
 import { groupBy, sortBy, sum } from 'lodash'
 import { Bet } from 'common/bet'
-import { Contract } from 'common/contract'
+import { AnyContractType, Contract } from 'common/contract'
 import { PAST_BETS } from 'common/user'
 import { ContractBetsTable } from '../bets-list'
 import { Spacer } from '../layout/spacer'
@@ -149,11 +149,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
           onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
         >
           <Tooltip
-            text={
+            text={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
-              sort === 'Best'
-                ? 'Highest tips + bounties first. Your new comments briefly appear to you first.'
-                : ''
-            }
           >
             <Row className="items-center gap-1">
               {sort}
@@ -164,7 +160,6 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
       </Row>
     </Row>
   )
-
   if (contract.outcomeType === 'FREE_RESPONSE') {
     return (
       <>

web/components/feed/feed-comments.tsx

@@ -25,7 +25,7 @@ import { CommentInput } from '../comment-input'
 import { AwardBountyButton } from 'web/components/award-bounty-button'
 import { ReplyIcon } from '@heroicons/react/solid'
 import { Button } from '../button'
-import { ReplyToggle } from '../comments/comments'
+import { ReplyToggle } from '../comments/reply-toggle'
 
 export type ReplyTo = { id: string; username: string }
 
@@ -119,15 +119,21 @@ export function ParentFeedComment(props: {
   const { text, content, userUsername, userAvatarUrl } = comment
 
   const router = useRouter()
-  const highlighted = router.asPath.endsWith(`#${comment.id}`)
+  const { isReady, asPath } = useRouter()
+  const [highlighted, setHighlighted] = useState(false)
   const commentRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (highlighted && commentRef.current != null) {
+    if (isReady && asPath.endsWith(`#${comment.id}`)) {
+      setHighlighted(true)
+    }
+  }, [isReady, asPath, comment.id])
+
+  useEffect(() => {
+    if (highlighted && commentRef.current) {
       commentRef.current.scrollIntoView(true)
     }
   }, [highlighted])
-
   return (
     <Row
       ref={commentRef}

web/pages/[username]/[contractSlug].tsx

@@ -209,11 +209,11 @@ export function ContractPageContent(
   const [answerResponse, setAnswerResponse] = useState<Answer | undefined>(
     undefined
   )
-  const answerRef = useRef<null | HTMLDivElement>(null)
+  const tabsContainerRef = useRef<null | HTMLDivElement>(null)
   const onAnswerCommentClick = useEvent((answer: Answer) => {
     setAnswerResponse(answer)
-    if (answerRef.current) {
+    if (tabsContainerRef.current) {
-      answerRef.current.scrollIntoView({ behavior: 'smooth' })
+      tabsContainerRef.current.scrollIntoView({ behavior: 'smooth' })
     } else {
       console.error('no ref to scroll to')
     }
@@ -305,7 +305,7 @@ export function ContractPageContent(
           userBets={userBets}
         />
 
-        <div ref={answerRef}>
+        <div ref={tabsContainerRef}>
           <ContractTabs
             contract={contract}
             bets={bets}

web/public/custom-components/curve.tsx

@@ -11,7 +11,7 @@ export default function Curve({
       height={size}
       fill="none"
       stroke={color}
-      stroke-width={strokeWidth}
+      strokeWidth={strokeWidth}
     >
       <path d="M5.02,0V5.24c0,4.3,3.49,7.79,7.79,7.79h5.2" />
     </svg>