Merge pull request #2014 from weseek/imprv/responsive-mail-setting

be responsive

src/client/js/components/Admin/App/MailSetting.jsx

@@ -40,8 +40,8 @@ class MailSetting extends React.Component {
       <React.Fragment>
         <p className="card well">{t('admin:app_setting.smtp_used')} {t('admin:app_setting.smtp_but_aws')}<br />{t('admin:app_setting.neihter_of')}</p>
         <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">{t('admin:app_setting.from_e-mail_address')}</label>
-          <div className="col-6">
+          <label className="col-md-3 col-form-label text-left">{t('admin:app_setting.from_e-mail_address')}</label>
+          <div className="col-md-9 col-md-6">
             <input
               className="form-control"
               type="text"
@@ -53,8 +53,8 @@ class MailSetting extends React.Component {
         </div>
 
         <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">{t('admin:app_setting.smtp_settings')}</label>
-          <div className="col-4">
+          <label className="col-md-3 col-form-label text-left">{t('admin:app_setting.smtp_settings')}</label>
+          <div className="col-md-4">
             <label>{t('admin:app_setting.host')}</label>
             <input
               className="form-control"
@@ -63,7 +63,7 @@ class MailSetting extends React.Component {
               onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
             />
           </div>
-          <div className="col-2">
+          <div className="col-md-2">
             <label>{t('admin:app_setting.port')}</label>
             <input
               className="form-control"
@@ -74,7 +74,7 @@ class MailSetting extends React.Component {
         </div>
 
         <div className="row form-group mb-5">
-          <div className="col-3 offset-3">
+          <div className="col-md-3 offset-md-3">
             <label>{t('admin:app_setting.user')}</label>
             <input
               className="form-control"
@@ -83,7 +83,7 @@ class MailSetting extends React.Component {
               onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
             />
           </div>
-          <div className="col-3">
+          <div className="col-md-3">
             <label>{t('Password')}</label>
             <input
               className="form-control"