From a5a5a394d009ce8b321e96547b8f88aa4f8d8ba7 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Tue, 20 Sep 2022 02:26:20 -0700
Subject: [PATCH] Tidy up messy markup on FR answers panel

---
 web/components/answers/answers-panel.tsx | 87 +++++++++++-------------
 1 file changed, 39 insertions(+), 48 deletions(-)

diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
index 41b7f0f9..c47e9575 100644
--- a/web/components/answers/answers-panel.tsx
+++ b/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')}>
-            {answerItems.map((item) => (
-              <div key={item.id} className={'relative pb-2'}>
-                <div className="relative flex items-start space-x-3">
-                  <OpenAnswer {...item} />
-                </div>
-              </div>
-            ))}
-            <Row className={'justify-end'}>
-              {hasZeroBetAnswers && !showAllAnswers && (
-                <Button
-                  color={'gray-white'}
-                  onClick={() => setShowAllAnswers(true)}
-                  size={'md'}
-                >
-                  Show More
-                </Button>
-              )}
-            </Row>
-          </div>
-        </div>
+        <Col
+          className={clsx(
+            'gap-2 pr-2 md:pr-0',
+            tradingAllowed(contract) ? '' : '-mb-6'
+          )}
+        >
+          {answerItems.map((item) => (
+            <OpenAnswer key={item.id} {...item} />
+          ))}
+          {hasZeroBetAnswers && !showAllAnswers && (
+            <Button
+              className="self-end"
+              color="gray-white"
+              onClick={() => setShowAllAnswers(true)}
+              size="md"
+            >
+              Show More
+            </Button>
+          )}
+        </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,37 +227,30 @@ 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 '}>
-                <span
-                  className={clsx(
-                    'text-2xl',
-                    tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
-                  )}
-                >
-                  {probPercent}
-                </span>
-                <BuyButton
-                  className={clsx(
-                    'btn-sm flex-initial !px-6 sm:flex',
-                    tradingAllowed(contract) ? '' : '!hidden'
-                  )}
-                  onClick={() => setOpen(true)}
-                />
-              </div>
+            <Linkify className="whitespace-pre-line text-lg" text={text} />
+            <Row className="align-items items-center justify-end gap-4">
+              <span
+                className={clsx(
+                  'text-2xl',
+                  tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
+                )}
+              >
+                {probPercent}
+              </span>
+              <BuyButton
+                className={clsx(
+                  'btn-sm flex-initial !px-6 sm:flex',
+                  tradingAllowed(contract) ? '' : '!hidden'
+                )}
+                onClick={() => setOpen(true)}
+              />
             </Row>
           </Col>
         </Col>