[question][ui] fix contribute question bottom bar

apps/portal/src/components/questions/ContributeQuestionDialog.tsx

@@ -61,7 +61,7 @@ export default function ContributeQuestionDialog({
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                 <Dialog.Panel className="relative w-full max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8">
-                  <div className="bg-white p-6 pt-5 sm:pb-4">
+                  <div className="bg-white px-6 pt-5">
                     <div className="flex flex-1 items-stretch">
                       <div className="mt-3 w-full sm:mt-0 sm:text-left">
                         <Dialog.Title

apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx

@@ -58,101 +58,102 @@ export default function ContributeQuestionForm({
     setCanSubmit(checked);
   };
   return (
-    <form
-      className="flex flex-1 flex-col items-stretch justify-center gap-y-4"
-      onSubmit={handleSubmit(onSubmit)}>
-      <div className="min-w-[113px] max-w-[113px] flex-1">
-        <Select
-          defaultValue="coding"
-          label="Type"
-          options={QUESTION_TYPES}
-          required={true}
-          {...selectRegister('questionType')}
-        />
-      </div>
-      <TextArea
-        label="Question Prompt"
-        placeholder="Contribute a question"
-        required={true}
-        rows={5}
-        {...register('questionContent')}
-      />
-      <HorizontalDivider />
-      <h2 className="text-md text-primary-800 font-semibold">
-        Additional information
-      </h2>
-      <div className="flex flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-end">
-        <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
-          <Controller
-            control={control}
-            name="location"
-            render={({ field }) => (
-              <LocationTypeahead
-                required={true}
-                onSelect={(option) => {
-                  field.onChange(option.value);
-                }}
-                {...field}
-                value={LOCATIONS.find(
-                  (location) => location.value === field.value,
-                )}
-              />
-            )}
+    <div className="flex flex-col justify-between gap-4">
+      <form
+        className="flex flex-1 flex-col items-stretch justify-center gap-y-4"
+        onSubmit={handleSubmit(onSubmit)}>
+        <div className="min-w-[113px] max-w-[113px] flex-1">
+          <Select
+            defaultValue="coding"
+            label="Type"
+            options={QUESTION_TYPES}
+            required={true}
+            {...selectRegister('questionType')}
           />
         </div>
-        <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
-          <Controller
-            control={control}
-            name="date"
-            render={({ field }) => (
-              <MonthYearPicker
-                monthRequired={true}
-                value={{
-                  month: ((field.value.getMonth() as number) + 1) as Month,
-                  year: field.value.getFullYear(),
-                }}
-                yearRequired={true}
-                onChange={({ month, year }) =>
-                  field.onChange(startOfMonth(new Date(year, month - 1)))
-                }
-              />
-            )}
-          />
-        </div>
-      </div>
-      <div className="flex flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-end">
-        <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
-          <Controller
-            control={control}
-            name="company"
-            render={({ field }) => (
-              <CompanyTypeahead
-                required={true}
-                onSelect={({ id }) => {
-                  field.onChange(id);
-                }}
-              />
-            )}
-          />
+        <TextArea
+          label="Question Prompt"
+          placeholder="Contribute a question"
+          required={true}
+          rows={5}
+          {...register('questionContent')}
+        />
+        <HorizontalDivider />
+        <h2 className="text-md text-primary-800 font-semibold">
+          Additional information
+        </h2>
+        <div className="flex flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-end">
+          <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
+            <Controller
+              control={control}
+              name="location"
+              render={({ field }) => (
+                <LocationTypeahead
+                  required={true}
+                  onSelect={(option) => {
+                    field.onChange(option.value);
+                  }}
+                  {...field}
+                  value={LOCATIONS.find(
+                    (location) => location.value === field.value,
+                  )}
+                />
+              )}
+            />
+          </div>
+          <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
+            <Controller
+              control={control}
+              name="date"
+              render={({ field }) => (
+                <MonthYearPicker
+                  monthRequired={true}
+                  value={{
+                    month: ((field.value.getMonth() as number) + 1) as Month,
+                    year: field.value.getFullYear(),
+                  }}
+                  yearRequired={true}
+                  onChange={({ month, year }) =>
+                    field.onChange(startOfMonth(new Date(year, month - 1)))
+                  }
+                />
+              )}
+            />
+          </div>
         </div>
-        <div className="flex-1 sm:min-w-[150px] sm:max-w-[200px]">
-          <Controller
-            control={control}
-            name="role"
-            render={({ field }) => (
-              <RoleTypeahead
-                required={true}
-                onSelect={(option) => {
-                  field.onChange(option.value);
-                }}
-                {...field}
-                value={ROLES.find((role) => role.value === field.value)}
-              />
-            )}
-          />
+        <div className="flex flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-end">
+          <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
+            <Controller
+              control={control}
+              name="company"
+              render={({ field }) => (
+                <CompanyTypeahead
+                  required={true}
+                  onSelect={({ id }) => {
+                    field.onChange(id);
+                  }}
+                />
+              )}
+            />
+          </div>
+          <div className="flex-1 sm:min-w-[150px] sm:max-w-[200px]">
+            <Controller
+              control={control}
+              name="role"
+              render={({ field }) => (
+                <RoleTypeahead
+                  required={true}
+                  onSelect={(option) => {
+                    field.onChange(option.value);
+                  }}
+                  {...field}
+                  value={ROLES.find((role) => role.value === field.value)}
+                />
+              )}
+            />
+          </div>
         </div>
-      </div>
-      {/* <div className="w-full">
+        {/* <div className="w-full">
         <HorizontalDivider />
       </div>
       <h1 className="mb-3">
@@ -171,6 +172,7 @@ export default function ContributeQuestionForm({
           }}
         />
       </div> */}
+      </form>
       <div
         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={{
@@ -199,6 +201,6 @@ export default function ContributeQuestionForm({
             variant="primary"></Button>
         </div>
       </div>
-    </form>
+    </div>
   );
 }