[questions][ui] update ContributeQuestionForm

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

@@ -60,14 +60,14 @@ export default function ContributeQuestionDialog({
                 leave="ease-in duration-200"
                 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 max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full">
+                <Dialog.Panel className="relative max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full">
                   <div className="bg-white p-6 pt-5 sm:pb-4">
                     <div className="flex flex-1 items-stretch">
                       <div className="mt-3 w-full sm:mt-0 sm:text-left">
                         <Dialog.Title
                           as="h3"
                           className="text-lg font-medium leading-6 text-gray-900">
-                          Question Draft
+                          Contribute question
                         </Dialog.Title>
                         <div className="w-full">
                           <HorizontalDivider />

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

@@ -3,7 +3,14 @@ import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { CalendarDaysIcon, UserIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
-import { Button, CheckboxInput, Select, TextArea, TextInput } from '@tih/ui';
+import {
+  Button,
+  CheckboxInput,
+  HorizontalDivider,
+  Select,
+  TextArea,
+  TextInput,
+} from '@tih/ui';
 
 import { QUESTION_TYPES } from '~/utils/questions/constants';
 import {
@@ -52,8 +59,17 @@ export default function ContributeQuestionForm({
   };
   return (
     <form
-      className=" flex flex-1 flex-col items-stretch justify-center pb-[50px]"
+      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"
@@ -61,38 +77,28 @@ export default function ContributeQuestionForm({
         rows={5}
         {...register('questionContent')}
       />
-      <div className="mt-3 mb-1 flex flex-wrap items-end gap-2">
-        <div className="mr-2 min-w-[113px] max-w-[113px] flex-1">
-          <Select
-            defaultValue="coding"
-            label="Type"
-            options={QUESTION_TYPES}
+      <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]">
+          <TextInput
+            label="Location"
             required={true}
-            {...selectRegister('questionType')}
-          />
-        </div>
-        <div className="min-w-[150px] max-w-[300px] flex-1">
-          <Controller
-            control={control}
-            name="company"
-            render={({ field }) => (
-              <CompaniesTypeahead
-                onSelect={({ id }) => {
-                  field.onChange(id);
-                }}
-              />
-            )}
+            startAddOn={CalendarDaysIcon}
+            startAddOnType="icon"
+            {...register('location')}
           />
         </div>
-
-        <div className="min-w-[150px] max-w-[300px] flex-1">
+        <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
           <Controller
             control={control}
             name="date"
             render={({ field }) => (
               <MonthYearPicker
                 value={{
-                  month: (field.value.getMonth() + 1) as Month,
+                  month: ((field.value.getMonth() as number) + 1) as Month,
                   year: field.value.getFullYear(),
                 }}
                 onChange={({ month, year }) =>
@@ -103,17 +109,21 @@ export default function ContributeQuestionForm({
           />
         </div>
       </div>
-      <div className="justify-left flex flex-wrap items-end gap-2">
-        <div className="min-w-[150px] max-w-[300px] flex-1">
-          <TextInput
-            label="Location"
-            required={true}
-            startAddOn={CalendarDaysIcon}
-            startAddOnType="icon"
-            {...register('location')}
+      <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 }) => (
+              <CompaniesTypeahead
+                onSelect={({ id }) => {
+                  field.onChange(id);
+                }}
+              />
+            )}
           />
         </div>
-        <div className="min-w-[150px] max-w-[200px] flex-1">
+        <div className="flex-1 sm:min-w-[150px] sm:max-w-[200px]">
           <TextInput
             label="Role"
             required={true}
@@ -142,15 +152,20 @@ export default function ContributeQuestionForm({
           }}
         />
       </div> */}
-      <div className="bg-primary-50 fixed bottom-0 left-0 w-full px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
-        <div className="mb-1 flex">
+      <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={{
+          // Hack to make the background bleed outside the container
+          clipPath: 'inset(0 -100vmax)',
+        }}>
+        <div className="my-2 flex sm:my-0">
           <CheckboxInput
             label="I have checked that my question is new"
             value={canSubmit}
             onChange={handleCheckSimilarQuestions}
           />
         </div>
-        <div className=" flex gap-x-2">
+        <div className="flex gap-x-2">
           <button
             className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
             type="button"