Adjust bet panel width

This commit is contained in:
James Grugett 2022-03-01 19:05:55 -08:00
parent 2692a98151
commit 5bf4654bf4
3 changed files with 6 additions and 4 deletions

View File

@ -30,8 +30,9 @@ export function AnswerBetPanel(props: {
answer: Answer answer: Answer
contract: Contract contract: Contract
closePanel: () => void closePanel: () => void
className?: string
}) { }) {
const { answer, contract, closePanel } = props const { answer, contract, closePanel, className } = props
const { id: answerId } = answer const { id: answerId } = answer
const user = useUser() const user = useUser()
@ -97,7 +98,7 @@ export function AnswerBetPanel(props: {
const currentReturnPercent = (currentReturn * 100).toFixed() + '%' const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
return ( 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"> <Row className="self-stretch items-center justify-between">
<div className="text-xl">Buy this answer</div> <div className="text-xl">Buy this answer</div>
@ -116,7 +117,7 @@ export function AnswerBetPanel(props: {
inputRef={inputRef} inputRef={inputRef}
contractId={contract.id} 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"> <Row className="justify-between items-center text-sm">
<div className="text-gray-500">Probability</div> <div className="text-gray-500">Probability</div>
<Row> <Row>

View File

@ -97,6 +97,7 @@ export function AnswerItem(props: {
answer={answer} answer={answer}
contract={contract} contract={contract}
closePanel={() => setIsBetting(false)} closePanel={() => setIsBetting(false)}
className="sm:w-72"
/> />
) : ( ) : (
<Row className="items-center justify-end gap-4 self-end sm:self-start"> <Row className="items-center justify-end gap-4 self-end sm:self-start">

View File

@ -162,7 +162,7 @@ export function BetPanel(props: {
contractId={contract.id} 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"> <Row className="justify-between items-center text-sm">
<div className="text-gray-500">Probability</div> <div className="text-gray-500">Probability</div>
<Row> <Row>