Adding responsive version of form on modals

Author: ramirlm

src/ui/AddOrEditAchievementModal/AddOrEditAchievementModal.tsx

@@ -79,43 +79,41 @@ const AddOrEditAchievementModal = ({
                 <h2 className="text-xteamaccent font-extrabold italic text-xl mb-8">
                     {selectedAchievement?.id ? 'Edit' : 'New'} Achievement
                 </h2>
-                <form onSubmit={handleSubmit}>
-                    <div className="flex space-x-6 pb-8">
-                        <div>
-                            <TextInput
-                            label="Description"
-                            {...getFieldProps("description")}
-                            {...getFieldMeta("description")}
-                            fullWidth
-                            />
-                        </div>
+                <form onSubmit={handleSubmit} className="flex flex-col gap-6 pb-8 sm:flex-row sm:gap-6 sm:pb-8">
+                    <div>
+                        <TextInput
+                        label="Description"
+                        {...getFieldProps("description")}
+                        {...getFieldMeta("description")}
+                        fullWidth
+                        />
+                    </div>
 
-                        <div>
-                            <TextInput
-                            label="Target Value"
-                            {...getFieldProps("targetValue")}
-                            {...getFieldMeta("targetValue")}
-                            fullWidth
-                            />
-                        </div>
+                    <div>
+                        <TextInput
+                        label="Target Value"
+                        {...getFieldProps("targetValue")}
+                        {...getFieldMeta("targetValue")}
+                        fullWidth
+                        />
+                    </div>
 
-                        <div>
-                            <label
-                            className="block text-gray-700 text-sm font-bold mt-9"
-                            htmlFor="isEnabled"
-                            >
-                            <Checkbox 
-                                {...getFieldProps("isEnabled")}
-                            >
-                                isEnabled
-                            </Checkbox>
-                            </label>
-                        </div>
-                        <div className="mt-8 flex justify-center flex-1">
-                            <Button type="submit" disabled={!isValid} fullWidth>
-                                Save
-                            </Button>
-                        </div>
+                    <div>
+                        <label
+                        className="block text-gray-700 text-sm font-bold mt-9"
+                        htmlFor="isEnabled"
+                        >
+                        <Checkbox 
+                            {...getFieldProps("isEnabled")}
+                        >
+                            isEnabled
+                        </Checkbox>
+                        </label>
+                    </div>
+                    <div className="mt-8 flex justify-center flex-1">
+                        <Button type="submit" disabled={!isValid} fullWidth>
+                            Save
+                        </Button>
                     </div>
                 </form>
             </Modal>

src/ui/AddOrEditLeaderboardModal/AddOrEditLeaderboardModal.tsx

@@ -78,12 +78,13 @@ const AddOrEditLeaderboardModal = ({
         <h2 className="text-xteamaccent font-extrabold italic text-xl mb-8">
           { selectedLeaderboard?.id ? 'Edit' : 'New'} Leaderboard
         </h2>
-        <form onSubmit={handleSubmit} className="flex flex-row gap-4">
+        <form onSubmit={handleSubmit} className="flex flex-col gap-6 pb-8 sm:flex-row sm:gap-6 sm:pb-8">
             <div className="w-full">
               <TextInput
                 label="Name"
                 {...getFieldProps("name")}
                 {...getFieldMeta("name")}
+                fullWidth
               />
             </div>