From 5bf4654bf4d2673de63848834afb1d55a259d2b5 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Tue, 1 Mar 2022 19:05:55 -0800
Subject: [PATCH] Adjust bet panel width

---
 web/components/answers/answer-bet-panel.tsx | 7 ++++---
 web/components/answers/answer-item.tsx      | 1 +
 web/components/bet-panel.tsx                | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index 4cd67369..26939b35 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -30,8 +30,9 @@ export function AnswerBetPanel(props: {
   answer: Answer
   contract: Contract
   closePanel: () => void
+  className?: string
 }) {
-  const { answer, contract, closePanel } = props
+  const { answer, contract, closePanel, className } = props
   const { id: answerId } = answer
 
   const user = useUser()
@@ -97,7 +98,7 @@ export function AnswerBetPanel(props: {
   const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
 
   return (
-    <Col className="items-start px-2 pb-2 pt-4 sm:pt-0">
+    <Col className={clsx('px-2 pb-2 pt-4 sm:pt-0', className)}>
       <Row className="self-stretch items-center justify-between">
         <div className="text-xl">Buy this answer</div>
 
@@ -116,7 +117,7 @@ export function AnswerBetPanel(props: {
         inputRef={inputRef}
         contractId={contract.id}
       />
-      <Col className="gap-3 mt-3 w-64">
+      <Col className="gap-3 mt-3 w-full">
         <Row className="justify-between items-center text-sm">
           <div className="text-gray-500">Probability</div>
           <Row>
diff --git a/web/components/answers/answer-item.tsx b/web/components/answers/answer-item.tsx
index 12817050..46fd0ead 100644
--- a/web/components/answers/answer-item.tsx
+++ b/web/components/answers/answer-item.tsx
@@ -97,6 +97,7 @@ export function AnswerItem(props: {
           answer={answer}
           contract={contract}
           closePanel={() => setIsBetting(false)}
+          className="sm:w-72"
         />
       ) : (
         <Row className="items-center justify-end gap-4 self-end sm:self-start">
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index d60fdd8f..67f304c5 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -162,7 +162,7 @@ export function BetPanel(props: {
         contractId={contract.id}
       />
 
-      <Col className="gap-3 mt-3 w-64">
+      <Col className="gap-3 mt-3 w-full">
         <Row className="justify-between items-center text-sm">
           <div className="text-gray-500">Probability</div>
           <Row>