Tidy up messy markup on FR answers panel

web/components/answers/answers-panel.tsx

@@ -123,28 +123,26 @@ export function AnswersPanel(props: {
         ))}
 
       {!resolveOption && (
-        <div className={clsx('flow-root pr-2 md:pr-0')}>
-          <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
+        <Col
+          className={clsx(
+            'gap-2 pr-2 md:pr-0',
+            tradingAllowed(contract) ? '' : '-mb-6'
+          )}
+        >
           {answerItems.map((item) => (
-              <div key={item.id} className={'relative pb-2'}>
-                <div className="relative flex items-start space-x-3">
-                  <OpenAnswer {...item} />
-                </div>
-              </div>
+            <OpenAnswer key={item.id} {...item} />
           ))}
-            <Row className={'justify-end'}>
           {hasZeroBetAnswers && !showAllAnswers && (
             <Button
-                  color={'gray-white'}
+              className="self-end"
+              color="gray-white"
               onClick={() => setShowAllAnswers(true)}
-                  size={'md'}
+              size="md"
             >
               Show More
             </Button>
           )}
-            </Row>
-          </div>
-        </div>
+        </Col>
       )}
 
       {answers.length <= 1 && (
@@ -212,7 +210,7 @@ function OpenAnswer(props: {
   const [open, setOpen] = useState(false)
 
   return (
-    <Col className={'border-base-200 bg-base-200 flex-1 rounded-md px-2'}>
+    <Col className="border-base-200 bg-base-200 relative flex-1 rounded-md px-2">
       <Modal open={open} setOpen={setOpen} position="center">
         <AnswerBetPanel
           answer={answer}
@@ -229,21 +227,15 @@ function OpenAnswer(props: {
       />
 
       <Row className="my-4 gap-3">
-        <div className="px-1">
-          <Avatar username={username} avatarUrl={avatarUrl} />
-        </div>
+        <Avatar className="mx-1" username={username} avatarUrl={avatarUrl} />
         <Col className="min-w-0 flex-1 lg:gap-1">
           <div className="text-sm text-gray-500">
             <UserLink username={username} name={name} /> answered
           </div>
 
           <Col className="align-items justify-between gap-4 sm:flex-row">
-            <span className="whitespace-pre-line text-lg">
-              <Linkify text={text} />
-            </span>
-
-            <Row className="items-center justify-center gap-4">
-              <div className={'align-items flex w-full justify-end gap-4 '}>
+            <Linkify className="whitespace-pre-line text-lg" text={text} />
+            <Row className="align-items items-center justify-end gap-4">
               <span
                 className={clsx(
                   'text-2xl',
@@ -259,7 +251,6 @@ function OpenAnswer(props: {
                 )}
                 onClick={() => setOpen(true)}
               />
-              </div>
             </Row>
           </Col>
         </Col>