From 2ae9f2c6187646eacc744b89320fc09e01f142f8 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Mon, 31 Oct 2022 14:39:54 +0800
Subject: [PATCH] [questions][ui] minor ui fixes (#473)

---
 .../questions/ContributeQuestionCard.tsx      | 98 +++++++++----------
 .../forms/ContributeQuestionForm.tsx          |  2 +-
 2 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
index 9313896a..ae53a914 100644
--- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
@@ -30,56 +30,54 @@ export default function ContributeQuestionCard({
   });
 
   return (
-    <div className="w-full">
-      <button
-        className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4 text-left hover:bg-slate-100"
-        type="button"
-        onClick={handleOpenContribute}>
-        <TextInput
-          disabled={true}
-          isLabelHidden={true}
-          label="Question"
-          placeholder="Contribute a question"
-          onChange={handleOpenContribute}
-        />
-        <div className="flex flex-wrap items-end justify-center gap-x-2">
-          <div className="min-w-[150px] flex-1">
-            <TextInput
-              disabled={true}
-              label="Company"
-              startAddOn={BuildingOffice2Icon}
-              startAddOnType="icon"
-              onChange={handleOpenContribute}
-            />
-          </div>
-          <div className="min-w-[150px] flex-1">
-            <TextInput
-              disabled={true}
-              label="Question type"
-              startAddOn={QuestionMarkCircleIcon}
-              startAddOnType="icon"
-              onChange={handleOpenContribute}
-            />
-          </div>
-          <div className="min-w-[150px] flex-1">
-            <TextInput
-              disabled={true}
-              label="Date"
-              startAddOn={CalendarDaysIcon}
-              startAddOnType="icon"
-              onChange={handleOpenContribute}
-            />
-          </div>
-          <h1 className="bg-primary-600 hover:bg-primary-700 rounded-full px-3 py-2 text-white">
-            Contribute
-          </h1>
+    <button
+      className="flex w-full flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4 text-left hover:bg-slate-100"
+      type="button"
+      onClick={handleOpenContribute}>
+      <TextInput
+        disabled={true}
+        isLabelHidden={true}
+        label="Question"
+        placeholder="Contribute a question"
+        onChange={handleOpenContribute}
+      />
+      <div className="flex flex-wrap items-end justify-start gap-2">
+        <div className="min-w-[150px] flex-1">
+          <TextInput
+            disabled={true}
+            label="Company"
+            startAddOn={BuildingOffice2Icon}
+            startAddOnType="icon"
+            onChange={handleOpenContribute}
+          />
         </div>
-        <ContributeQuestionDialog
-          show={showDraftDialog}
-          onCancel={handleDraftDialogCancel}
-          onSubmit={onSubmit}
-        />
-      </button>
-    </div>
+        <div className="min-w-[150px] flex-1">
+          <TextInput
+            disabled={true}
+            label="Question type"
+            startAddOn={QuestionMarkCircleIcon}
+            startAddOnType="icon"
+            onChange={handleOpenContribute}
+          />
+        </div>
+        <div className="min-w-[150px] flex-1">
+          <TextInput
+            disabled={true}
+            label="Date"
+            startAddOn={CalendarDaysIcon}
+            startAddOnType="icon"
+            onChange={handleOpenContribute}
+          />
+        </div>
+        <h1 className="bg-primary-600 hover:bg-primary-700 rounded-full px-3 py-2 text-white">
+          Contribute
+        </h1>
+      </div>
+      <ContributeQuestionDialog
+        show={showDraftDialog}
+        onCancel={handleDraftDialogCancel}
+        onSubmit={onSubmit}
+      />
+    </button>
   );
 }
diff --git a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
index bdebd2d9..faf8d25d 100644
--- a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
+++ b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
@@ -252,7 +252,7 @@ export default function ContributeQuestionForm({
           )}
         </div>
         <div
-          className="bg-primary-50 flex w-full justify-between gap-y-2 py-3 shadow-[0_0_0_100vmax_theme(colors.primary.50)]"
+          className="bg-primary-50 flex w-full flex-col gap-y-2 py-3 shadow-[0_0_0_100vmax_theme(colors.primary.50)] sm:flex-row sm:justify-between"
           style={{
             // Hack to make the background bleed outside the container
             clipPath: 'inset(0 -100vmax)',