adjust layout LineBreakSetting

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

@@ -93,11 +93,11 @@ class LineBreakForm extends React.Component {
 
     return (
       <React.Fragment>
-        <fieldset className="row mx-auto w-100">
+        <fieldset className="mx-auto">
           {this.renderLineBreakOption()}
           {this.renderLineBreakInCommentOption()}
         </fieldset>
-        <div className="form-group row mx-auto my-3">
+        <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>
           </div>

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

@@ -19,28 +19,28 @@ class MarkdownSetting extends React.Component {
       <React.Fragment>
         {/* Line Break Setting */}
         <div className="row mb-5">
-          <h2 className="border-bottom w-100">{ t('markdown_setting.line_break_setting') }</h2>
+          <h2 className="border-bottom col-12">{ t('markdown_setting.line_break_setting') }</h2>
           {/* <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 className="well col-12">
+            <CardBody className="px-2 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>
-          <Card className="well w-100">
-            <CardBody className="py-3">{ t('markdown_setting.presentation_setting_desc') }</CardBody>
+          <h2 className="border-bottom col-12">{ t('markdown_setting.presentation_setting') }</h2>
+          <Card className="well col-12">
+            <CardBody className="px-2 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>
-          <Card className="well w-100">
-            <CardBody className="py-3">{ t('markdown_setting.XSS_setting_desc') }</CardBody>
+          <h2 className="border-bottom col-12">{ t('markdown_setting.XSS_setting') }</h2>
+          <Card className="well col-12">
+            <CardBody className="px-2 py-3">{ t('markdown_setting.XSS_setting_desc') }</CardBody>
           </Card>
           <XssForm />
         </div>

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

@@ -39,11 +39,11 @@ class PresentationForm extends React.Component {
 
     return (
       <React.Fragment>
-        <fieldset className="form-group row mx-auto my-2 w-100">
+        <fieldset className="form-group mx-auto my-2">
 
-          <label className="col-xs-3 control-label text-left">
+          <p className="col-xs-3 control-label text-left">
             { t('markdown_setting.Page break setting') }
-          </label>
+          </p>
 
           <div className="form-group form-check-inline col-xs-12 my-3">
             <div className="col-xs-3 radio radio-primary mt-3">
@@ -99,7 +99,7 @@ class PresentationForm extends React.Component {
             </div>
           </div>
         </fieldset>
-        <div className="form-group mx-auto my-3">
+        <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>
           </div>

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

@@ -93,7 +93,7 @@ class XssForm extends React.Component {
 
     return (
       <React.Fragment>
-        <fieldset className="row form-group my-3 mx-auto w-100">
+        <fieldset className="form-group mx-auto my-3">
           <div className="col-xs-offset-4 col-xs-6 text-left">
             <div className="checkbox checkbox-success">
               <input
@@ -110,7 +110,7 @@ class XssForm extends React.Component {
           </div>
           {isEnabledXss && this.xssOptions()}
         </fieldset>
-        <div className="form-group row mx-auto my-3">
+        <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>
           </div>