changed the position of checkbox and added a margin at right side of border

src/client/js/components/Admin/UserManagement.jsx

@@ -43,6 +43,8 @@ class UserManagement extends React.Component {
    * onChange 全て
    */
 
+
+  // To do GW-1206 チェックボックスのonChangeの設定
   onChangeStatusList(status) {
     const { statusList } = this.state;
 
@@ -83,35 +85,33 @@ class UserManagement extends React.Component {
 
         <h2>{t('User_Management')}</h2>
 
-        <div className="row container border-top border-bottom">
-          <div className="col-md-">
-            <div className="px-0">
+        <div className="row border-top border-bottom mr-2">
+          <div className="px-0">
 
-              <label className="mb-0 my-3">
-                <i className="icon-magnifier mr-1"></i>
-                <input type="text" name="name" />
-              </label>
-            </div>
+            <label className="col-md-3 mb-0 my-3">
+              <i className="icon-magnifier mr-1"></i>
+              <input type="text" name="name" />
+            </label>
+          </div>
 
-            <div className="py-2 my-2" style={{ width: 500 }}>
-              <input type="checkbox" className="mr-1" onChange={() => { this.onChangeStatusList() }} />
-              <label className="mr-2">全て</label>
+          <div className="col-md-6 py-2 my-2" style={{ width: 500 }}>
+            <input type="checkbox" className="mr-1" onChange={() => { this.onChangeStatusList() }} />
+            <label className="mr-2">全て</label>
 
-              <input type="checkbox" className="mr-1" onChange={this.ApprovalPending} />
-              <label className="label label-info mr-2">Approval Pending</label>
+            <input type="checkbox" className="mr-1" onChange={this.ApprovalPending} />
+            <label className="label label-info mr-2">Approval Pending</label>
 
-              <input type="checkbox" className="mr-1" onChange={this.Active} />
-              <label className="label label-success mr-2">Active</label>
+            <input type="checkbox" className="mr-1" onChange={this.Active} />
+            <label className="label label-success mr-2">Active</label>
 
-              <input type="checkbox" className="mr-1" onChange={this.Suspended} />
-              <label className="label label-warning mr-2">Suspended</label>
+            <input type="checkbox" className="mr-1" onChange={this.Suspended} />
+            <label className="label label-warning mr-2">Suspended</label>
 
-              <input type="checkbox" className="mr-1" onChange={this.__Invited} />
-              <label className="label label-info mr-2">Invited</label>
+            <input type="checkbox" className="mr-1" onChange={this.__Invited} />
+            <label className="label label-info mr-2">Invited</label>
 
-              <input type="checkbox" className="mr-1" onChange={this.__Status} />
-              <label className="label label-info">Status</label>
-            </div>
+            <input type="checkbox" className="mr-1" onChange={this.__Status} />
+            <label className="label label-info">Status</label>
           </div>
         </div>