fix: Fix the spacing and ordering of UI elements in image editor

Author: xitij2000

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.tsx

@@ -12,13 +12,24 @@ const AltTextControls = () => {
   const formik = useFormikContext<ImageConfig>();
   return (
     <>
-      <Form.Group className="mt-1.5">
-        <Form.Label>
-          {intl.formatMessage(messages.accessibilityLabel)}
-        </Form.Label>
+      <Form.Label className="mb-0">
+        {intl.formatMessage(messages.accessibilityLabel)}
+      </Form.Label>
+      <Form.Group className="mb-1">
+        <Form.Checkbox
+          name="isDecorative"
+          checked={formik.values.isDecorative}
+          className="mt-2.5 decorative-control-label"
+          onChange={formik.handleChange}
+        >
+          <Form.Label>
+            {intl.formatMessage(messages.decorativeAltTextCheckboxLabel)}
+          </Form.Label>
+        </Form.Checkbox>
+      </Form.Group>
+      <Form.Group>
         <Form.Control
           name="altText"
-          className="mt-1.5"
           floatingLabel={intl.formatMessage(messages.altTextFloatingLabel)}
           disabled={formik.values.isDecorative}
           isInvalid={Boolean(formik.errors.altText)}
@@ -32,18 +43,6 @@ const AltTextControls = () => {
         </Form.Control.Feedback>
         )}
       </Form.Group>
-      <Form.Group>
-        <Form.Checkbox
-          name="isDecorative"
-          checked={formik.values.isDecorative}
-          className="mt-2.5 decorative-control-label"
-          onChange={formik.handleChange}
-        >
-          <Form.Label>
-            {intl.formatMessage(messages.decorativeAltTextCheckboxLabel)}
-          </Form.Label>
-        </Form.Checkbox>
-      </Form.Group>
     </>
   );
 };