adjust progress bar layout

src/client/js/components/Admin/Export/ExportPage.jsx

@@ -131,10 +131,10 @@ class ExportPage extends React.Component {
   }
 
   renderProgressBars() {
-    return this.state.progressList.map((progressData) => {
+    const cols = this.state.progressList.map((progressData) => {
       const { collectionName, currentCount, totalCount } = progressData;
       return (
-        <div className="px-3 w-50" key={collectionName}>
+        <div className="col-md-6" key={collectionName}>
           <ExportingProgressBar
             collectionName={collectionName}
             currentCount={currentCount}
@@ -143,6 +143,8 @@ class ExportPage extends React.Component {
         </div>
       );
     });
+
+    return <div className="row px-3">{cols}</div>;
   }
 
   render() {

src/client/js/components/Admin/Export/ExportingProgressBar.jsx

@@ -19,7 +19,7 @@ class ExportingProgressBar extends React.Component {
         </h5>
         <div className="progress progress-sm">
           <div
-            className={`progress-bar progress-bar-success ${isActive ? 'progress-bar-striped active' : ''}`}
+            className={`progress-bar ${isActive ? 'progress-bar-info progress-bar-striped active' : 'progress-bar-success'}`}
             style={{ width: `${percentage}%` }}
           >
             <span className="sr-only">{percentage.toFixed(0)}% Complete</span>