Repository: answerdev/answer
File: ui/src/pages/Install/components/SecondStep/index.tsx (TypeScript)

Code before:
                value={data.ssl_mode.value}
                onChange={(e) => {
                  changeCallback({
                    ssl_mode: {
                      value: e.target.value,
                      isInvalid: false,
                      errorMsg: '',
                    },
                  });
                }}>
                {sslModes.map((item) => {
                  return (
                    <option value={item.value} key={item.value}>
                      {item.value}
                    </option>
                  );
                })}
              </Form.Select>
            </Form.Group>
          )}
          {data.db_type.value === 'postgres' &&
            data.ssl_enabled.value &&
            (data.ssl_mode.value === 'verify-ca' ||
              data.ssl_mode.value === 'verify-full') && (
              <Row className="mb-3">
                <Form.Group as={Col} controlId="key_file" className="mb-3 me-1">
                  <Form.Control
                    placeholder={t('key_file.placeholder')}
                    aria-label="key_file"
                    aria-describedby="basic-addon1"
                    isInvalid={data.key_file.isInvalid}
                    onChange={(e) => {
                      changeCallback({
                        key_file: {
                          value: e.target.value,
                          isInvalid: false,
                          errorMsg: '',
                        },
                      });
                    }}
                    required
                  />
                  <Form.Control.Feedback type="invalid">
                    {`${data.key_file.errorMsg}`}
                  </Form.Control.Feedback>
                </Form.Group>
                <Form.Group
                  as={Col}
                  controlId="cert_file"
                  className="mb-3 me-1">
                  <Form.Control

Review comment (suggestion):
Class `mb-3` has been added to the Row component, remove the className of the inner Form.Group, and `me-1` is not required.

Code after:
              <Form.Label>{t('ssl_mode.label')}</Form.Label>
              <Form.Select
                value={data.ssl_mode.value}
                onChange={(e) => {
                  changeCallback({
                    ssl_mode: {
                      value: e.target.value,
                      isInvalid: false,
                      errorMsg: '',
                    },
                  });
                }}>
                {sslModes.map((item) => {
                  return (
                    <option value={item.value} key={item.value}>
                      {item.value}
                    </option>
                  );
                })}
              </Form.Select>
            </Form.Group>
          )}
          {data.db_type.value === 'postgres' &&
            data.ssl_enabled.value &&
            (data.ssl_mode.value === 'verify-ca' ||
              data.ssl_mode.value === 'verify-full') && (
              <Row className="mb-3">
                <Form.Group as={Col} controlId="key_file">
                  <Form.Control
                    placeholder={t('key_file.placeholder')}
                    aria-label="key_file"
                    aria-describedby="basic-addon1"
                    isInvalid={data.key_file.isInvalid}
                    onChange={(e) => {
                      changeCallback({
                        key_file: {
                          value: e.target.value,
                          isInvalid: false,
                          errorMsg: '',
                        },
                      });
                    }}
                    required
                  />
                  <Form.Control.Feedback type="invalid">
                    {`${data.key_file.errorMsg}`}
                  </Form.Control.Feedback>
                </Form.Group>
                <Form.Group as={Col} controlId="cert_file">
                  <Form.Control
                    placeholder={t('cert_file.placeholder')}