Fix Markdown setting layout

apps/app/src/components/Admin/MarkdownSetting/MarkDownSettingContents.tsx

@@ -40,24 +40,24 @@ const MarkDownSettingContents = React.memo((props: Props): JSX.Element => {
   }, [adminMarkDownContainer]);
 
   return (
-    <div data-testid="admin-markdown">
+    <div data-testid="admin-markdown" className="mb-5">
       {/* Line Break Setting */}
       <h2 className="admin-setting-header">{t('markdown_settings.lineBreak_header')}</h2>
-      <Card className="card custom-card my-3">
+      <Card className="card custom-card bg-body-tertiary my-3">
         <CardBody className="px-0 py-2">{ t('markdown_settings.lineBreak_desc') }</CardBody>
       </Card>
       <LineBreakForm />
 
       {/* Indent Setting */}
-      <h2 className="admin-setting-header">{t('markdown_settings.indent_header')}</h2>
-      <Card className="card custom-card my-3">
+      <h2 className="admin-setting-header mt-5">{t('markdown_settings.indent_header')}</h2>
+      <Card className="card custom-card bg-body-tertiary my-3">
         <CardBody className="px-0 py-2">{t('markdown_settings.indent_desc') }</CardBody>
       </Card>
       <IndentForm />
 
       {/* XSS Setting */}
-      <h2 className="admin-setting-header">{ t('markdown_settings.xss_header') }</h2>
-      <Card className="card custom-card my-3">
+      <h2 className="admin-setting-header mt-5">{ t('markdown_settings.xss_header') }</h2>
+      <Card className="card custom-card bg-body-tertiary my-3">
         <CardBody className="px-0 py-2">{ t('markdown_settings.xss_desc') }</CardBody>
       </Card>
       <XssForm />

apps/app/src/components/Admin/MarkdownSetting/WhitelistInput.jsx

@@ -41,7 +41,7 @@ class WhitelistInput extends React.Component {
         <div className="mt-4">
           <div className="d-flex justify-content-between">
             {t('markdown_settings.xss_options.tag_names')}
-            <p id="btn-import-tags" className="btn btn-sm btn-primary mb-0" onClick={this.onClickRecommendTagButton}>
+            <p id="btn-import-tags" className="btn btn-sm btn-primary" onClick={this.onClickRecommendTagButton}>
               {t('markdown_settings.xss_options.import_recommended', { target: 'Tags' })}
             </p>
           </div>
@@ -58,7 +58,7 @@ class WhitelistInput extends React.Component {
         <div className="mt-4">
           <div className="d-flex justify-content-between">
             {t('markdown_settings.xss_options.tag_attributes')}
-            <p id="btn-import-tags" className="btn btn-sm btn-primary mb-0" onClick={this.onClickRecommendAttrButton}>
+            <p id="btn-import-tags" className="btn btn-sm btn-primary" onClick={this.onClickRecommendAttrButton}>
               {t('markdown_settings.xss_options.import_recommended', { target: 'Attrs' })}
             </p>
           </div>

apps/app/src/components/Admin/MarkdownSetting/XssForm.jsx

@@ -45,10 +45,10 @@ class XssForm extends React.Component {
     const rehypeRecommendedAttributes = JSON.stringify(sanitizeDefaultSchema.attributes);
 
     return (
-      <div className="col-12 my-3">
+      <div className="col-12 mt-3">
         <div className="row">
 
-          <div className="col-md-6 col-sm-12 align-self-start mb-4">
+          <div className="col-md-6 col-sm-12 align-self-start">
             <div className="form-check">
               <input
                 type="radio"
@@ -90,7 +90,7 @@ class XssForm extends React.Component {
             </div>
           </div>
 
-          <div className="col-md-6 col-sm-12 align-self-start mb-4">
+          <div className="col-md-6 col-sm-12 align-self-start">
             <div className="form-check">
               <input
                 type="radio"
@@ -119,7 +119,7 @@ class XssForm extends React.Component {
       <React.Fragment>
         <fieldset className="col-12">
           <div>
-            <div className="col-8 offset-4 my-3">
+            <div className="col-8 offset-4 mt-3">
               <div className="form-check form-switch form-check-success">
                 <input
                   type="checkbox"