From 3e21aabef3607bee6e32f4d6faddf20731777037 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Wed, 9 Nov 2022 11:02:23 +0800
Subject: [PATCH] [questions][fix] fix CreateListDialog layout

---
 .../components/questions/CreateListDialog.tsx | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/apps/portal/src/components/questions/CreateListDialog.tsx b/apps/portal/src/components/questions/CreateListDialog.tsx
index c02e06bd..bd14174a 100644
--- a/apps/portal/src/components/questions/CreateListDialog.tsx
+++ b/apps/portal/src/components/questions/CreateListDialog.tsx
@@ -31,37 +31,15 @@ export default function CreateListDialog({
     reset();
   };
 
+  const handleFormSubmit = handleSubmit(async (data) => {
+    await onSubmit(data);
+    reset();
+  });
+
   return (
     <Dialog
       isShown={show}
-      primaryButton={undefined}
-      title="Create question list"
-      onClose={handleDialogCancel}>
-      <form
-        className="mt-5 gap-2 sm:flex sm:items-center"
-        onSubmit={handleSubmit(async (data) => {
-          await onSubmit(data);
-          reset();
-        })}>
-        <div className="w-full sm:max-w-xs">
-          <TextInput
-            id="listName"
-            isLabelHidden={true}
-            {...register('name')}
-            autoComplete="off"
-            label="Name"
-            placeholder="List name"
-            required={true}
-            type="text"
-          />
-        </div>
-        <Button
-          display="inline"
-          label="Cancel"
-          size="md"
-          variant="tertiary"
-          onClick={handleDialogCancel}
-        />
+      primaryButton={
         <Button
           disabled={!isDirty}
           display="inline"
@@ -70,6 +48,30 @@ export default function CreateListDialog({
           size="md"
           type="submit"
           variant="primary"
+          onClick={handleFormSubmit}
+        />
+      }
+      secondaryButton={
+        <Button
+          display="inline"
+          label="Cancel"
+          size="md"
+          variant="tertiary"
+          onClick={handleDialogCancel}
+        />
+      }
+      title="Create question list"
+      onClose={handleDialogCancel}>
+      <form className="w-full" onSubmit={handleFormSubmit}>
+        <TextInput
+          id="listName"
+          isLabelHidden={true}
+          {...register('name')}
+          autoComplete="off"
+          label="Name"
+          placeholder="List name"
+          required={true}
+          type="text"
         />
       </form>
     </Dialog>