From 39d7f1055bfb682a8f4e81c977eefebe6360c4cd Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Tue, 6 Sep 2022 07:58:00 -0600
Subject: [PATCH] Fix spacing on challenge modal

---
 .../challenges/create-challenge-modal.tsx     | 114 +++++++++---------
 1 file changed, 59 insertions(+), 55 deletions(-)

diff --git a/web/components/challenges/create-challenge-modal.tsx b/web/components/challenges/create-challenge-modal.tsx
index 6f91a6d4..6c810a44 100644
--- a/web/components/challenges/create-challenge-modal.tsx
+++ b/web/components/challenges/create-challenge-modal.tsx
@@ -147,7 +147,7 @@ function CreateChallengeForm(props: {
             setFinishedCreating(true)
           }}
         >
-          <Title className="!mt-2" text="Challenge bet " />
+          <Title className="!mt-2 hidden sm:block" text="Challenge bet " />
 
           <div className="mb-8">
             Challenge a friend to bet on{' '}
@@ -170,72 +170,76 @@ function CreateChallengeForm(props: {
             )}
           </div>
 
-          <div className="mt-2 flex flex-col flex-wrap justify-center gap-x-5 gap-y-2">
-            <div>You'll bet:</div>
-            <Row
-              className={
-                'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
-              }
-            >
-              <AmountInput
-                amount={challengeInfo.amount || undefined}
-                onChange={(newAmount) =>
-                  setChallengeInfo((m: challengeInfo) => {
-                    return {
-                      ...m,
-                      amount: newAmount ?? 0,
-                      acceptorAmount: editingAcceptorAmount
-                        ? m.acceptorAmount
-                        : newAmount ?? 0,
-                    }
-                  })
-                }
-                error={undefined}
-                label={'M$'}
-                inputClassName="w-24"
-              />
-              <span className={''}>on</span>
-              {challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
-            </Row>
-            <Row className={'mt-3 max-w-xs justify-end'}>
-              <Button
-                color={'gray-white'}
-                onClick={() =>
-                  setChallengeInfo((m: challengeInfo) => {
-                    return {
-                      ...m,
-                      outcome: m.outcome === 'YES' ? 'NO' : 'YES',
-                    }
-                  })
+          <Col className="mt-2 flex-wrap justify-center gap-x-5 sm:gap-y-2">
+            <Col>
+              <div>You'll bet:</div>
+              <Row
+                className={
+                  'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
                 }
               >
-                <SwitchVerticalIcon className={'h-6 w-6'} />
-              </Button>
-            </Row>
-            <Row className={'items-center'}>If they bet:</Row>
-            <Row className={'max-w-xs items-center justify-between gap-4 pr-3'}>
-              <div className={'w-32 sm:mr-1'}>
                 <AmountInput
-                  amount={challengeInfo.acceptorAmount || undefined}
-                  onChange={(newAmount) => {
-                    setEditingAcceptorAmount(true)
-
+                  amount={challengeInfo.amount || undefined}
+                  onChange={(newAmount) =>
                     setChallengeInfo((m: challengeInfo) => {
                       return {
                         ...m,
-                        acceptorAmount: newAmount ?? 0,
+                        amount: newAmount ?? 0,
+                        acceptorAmount: editingAcceptorAmount
+                          ? m.acceptorAmount
+                          : newAmount ?? 0,
                       }
                     })
-                  }}
+                  }
                   error={undefined}
                   label={'M$'}
                   inputClassName="w-24"
                 />
-              </div>
-              <span>on</span>
-              {challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />}
-            </Row>
-          </div>
+                <span className={''}>on</span>
+                {challengeInfo.outcome === 'YES' ? <YesLabel /> : <NoLabel />}
+              </Row>
+              <Row className={'mt-3 max-w-xs justify-end'}>
+                <Button
+                  color={'gray-white'}
+                  onClick={() =>
+                    setChallengeInfo((m: challengeInfo) => {
+                      return {
+                        ...m,
+                        outcome: m.outcome === 'YES' ? 'NO' : 'YES',
+                      }
+                    })
+                  }
+                >
+                  <SwitchVerticalIcon className={'h-6 w-6'} />
+                </Button>
+              </Row>
+              <Row className={'items-center'}>If they bet:</Row>
+              <Row
+                className={'max-w-xs items-center justify-between gap-4 pr-3'}
+              >
+                <div className={'w-32 sm:mr-1'}>
+                  <AmountInput
+                    amount={challengeInfo.acceptorAmount || undefined}
+                    onChange={(newAmount) => {
+                      setEditingAcceptorAmount(true)
+
+                      setChallengeInfo((m: challengeInfo) => {
+                        return {
+                          ...m,
+                          acceptorAmount: newAmount ?? 0,
+                        }
+                      })
+                    }}
+                    error={undefined}
+                    label={'M$'}
+                    inputClassName="w-24"
+                  />
+                </div>
+                <span>on</span>
+                {challengeInfo.outcome === 'YES' ? <NoLabel /> : <YesLabel />}
+              </Row>
+            </Col>
+          </Col>
           {contract && (
             <Button
               size="2xs"