Adjust create page styles

web/components/answers/multiple-choice-answers.tsx

@@ -40,10 +40,10 @@ export function MultipleChoiceAnswers(props: {
           />
           {answers.length > 2 && (
             <button
-              className="btn btn-xs btn-outline ml-2"
+              className="-mr-2 rounded p-2"
               onClick={() => removeAnswer(i)}
             >
-              <XIcon className="h-4 w-4 flex-shrink-0" />
+              <XIcon className="h-5 w-5 flex-shrink-0" />
             </button>
           )}
         </Row>

web/components/choices-toggle-group.tsx

@@ -22,7 +22,10 @@ export function ChoicesToggleGroup(props: {
   } = props
   return (
     <RadioGroup
-      className={clsx(className, 'flex flex-row flex-wrap items-center gap-3')}
+      className={clsx(
+        className,
+        'flex flex-row flex-wrap items-center gap-2 sm:gap-3'
+      )}
       value={currentChoice.toString()}
       onChange={setChoice}
     >

web/pages/create.tsx

@@ -299,7 +299,7 @@ export function NewContract(props: {
             <Row className="gap-2">
               <input
                 type="number"
-                className="input input-bordered"
+                className="input input-bordered w-32"
                 placeholder="MIN"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setMinString(e.target.value)}
@@ -310,7 +310,7 @@ export function NewContract(props: {
               />
               <input
                 type="number"
-                className="input input-bordered"
+                className="input input-bordered w-32"
                 placeholder="MAX"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setMaxString(e.target.value)}