adjust LineBreakForm layout

src/client/js/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
+import { } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
@@ -7,6 +8,7 @@ import loggerFactory from '@alias/logger';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
+
 import AppContainer from '../../../services/AppContainer';
 import MarkDownSettingContainer from '../../../services/MarkDownSettingContainer';
 
@@ -41,7 +43,7 @@ class LineBreakForm extends React.Component {
     const helpLineBreak = { __html: t('markdown_setting.Enable Line Break desc') };
 
     return (
-      <div className="form-group row">
+      <div className="form-group row my-3">
         <div className="col-xs-offset-4 col-xs-6 text-left">
           <div className="checkbox checkbox-success">
             <input
@@ -67,7 +69,7 @@ class LineBreakForm extends React.Component {
     const helpLineBreakInComment = { __html: t('markdown_setting.Enable Line Break for comment desc') };
 
     return (
-      <div className="form-group row">
+      <div className="form-group row my-3">
         <div className="col-xs-offset-4 col-xs-6 text-left">
           <div className="checkbox checkbox-success">
             <input
@@ -91,7 +93,7 @@ class LineBreakForm extends React.Component {
 
     return (
       <React.Fragment>
-        <fieldset className="row">
+        <fieldset className="row mx-auto">
           {this.renderLineBreakOption()}
           {this.renderLineBreakInCommentOption()}
         </fieldset>

src/client/js/components/Admin/MarkdownSetting/MarkDownSetting.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Card, CardBody } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -19,21 +20,28 @@ class MarkdownSetting extends React.Component {
         {/* Line Break Setting */}
         <div className="row mb-5">
           <h2 className="border-bottom w-100">{ t('markdown_setting.line_break_setting') }</h2>
-          <div className="well w-100">{ t('markdown_setting.line_break_setting_desc') }</div>
+          {/* <div className="well w-100">{ t('markdown_setting.line_break_setting_desc') }</div> */}
+          <Card className="well w-100">
+            <CardBody className="py-3">{ t('markdown_setting.line_break_setting_desc') }</CardBody>
+          </Card>
           <LineBreakForm />
         </div>
 
         {/* Presentation Setting */}
         <div className="row mb-5">
           <h2 className="border-bottom w-100">{ t('markdown_setting.presentation_setting') }</h2>
-          <p className="well w-100">{ t('markdown_setting.presentation_setting_desc') }</p>
+          <Card className="well w-100">
+            <CardBody className="py-3">{ t('markdown_setting.presentation_setting_desc') }</CardBody>
+          </Card>
           <PresentationForm />
         </div>
 
         {/* XSS Setting */}
         <div className="row mb-5">
           <h2 className="border-bottom w-100">{ t('markdown_setting.XSS_setting') }</h2>
-          <p className="well">{ t('markdown_setting.XSS_setting_desc') }</p>
+          <Card className="well w-100">
+            <CardBody className="py-3">{ t('markdown_setting.XSS_setting_desc') }</CardBody>
+          </Card>
           <XssForm />
         </div>
       </React.Fragment>