From 43660387fa3df7e08a768ed95544cf5000ef0cbe Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Fri, 9 Sep 2022 16:08:42 -0500
Subject: [PATCH] modal positioning

---
 web/components/answers/answers-panel.tsx |  2 +-
 web/components/bet-button.tsx            |  2 +-
 web/components/layout/modal.tsx          | 16 ++++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
index e53153b1..5811403f 100644
--- a/web/components/answers/answers-panel.tsx
+++ b/web/components/answers/answers-panel.tsx
@@ -194,7 +194,7 @@ function OpenAnswer(props: {
 
   return (
     <Col className={'border-base-200 bg-base-200 flex-1 rounded-md px-2'}>
-      <Modal open={open} setOpen={setOpen}>
+      <Modal open={open} setOpen={setOpen} position="center">
         <AnswerBetPanel
           answer={answer}
           contract={contract}
diff --git a/web/components/bet-button.tsx b/web/components/bet-button.tsx
index 6875ecb0..0bd3702f 100644
--- a/web/components/bet-button.tsx
+++ b/web/components/bet-button.tsx
@@ -60,7 +60,7 @@ export default function BetButton(props: {
         )}
       </Col>
 
-      <Modal open={open} setOpen={setOpen}>
+      <Modal open={open} setOpen={setOpen} position="center">
         <SimpleBetPanel
           className={betPanelClassName}
           contract={contract}
diff --git a/web/components/layout/modal.tsx b/web/components/layout/modal.tsx
index d1a65607..435286ca 100644
--- a/web/components/layout/modal.tsx
+++ b/web/components/layout/modal.tsx
@@ -8,9 +8,10 @@ export function Modal(props: {
   open: boolean
   setOpen: (open: boolean) => void
   size?: 'sm' | 'md' | 'lg' | 'xl'
+  position?: 'center' | 'top' | 'bottom'
   className?: string
 }) {
-  const { children, open, setOpen, size = 'md', className } = props
+  const { children, position, open, setOpen, size = 'md', className } = props
 
   const sizeClass = {
     sm: 'max-w-sm',
@@ -19,6 +20,12 @@ export function Modal(props: {
     xl: 'max-w-5xl',
   }[size]
 
+  const positionClass = {
+    center: 'items-center',
+    top: 'items-start',
+    bottom: 'items-end',
+  }[position ?? 'bottom']
+
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
@@ -26,7 +33,12 @@ export function Modal(props: {
         className="fixed inset-0 z-50 overflow-y-auto"
         onClose={setOpen}
       >
-        <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:p-0">
+        <div
+          className={clsx(
+            'flex min-h-screen justify-center px-4 pt-4 pb-20 text-center sm:p-0',
+            positionClass
+          )}
+        >
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"