Merge pull request #2086 from weseek/imprv/gw2081-fix-table-width

Imprv/gw2081 fix table width

src/client/js/components/Admin/ExportArchiveData/ArchiveFilesTable.jsx

@@ -14,35 +14,37 @@ class ArchiveFilesTable extends React.Component {
     const { t } = this.props;
 
     return (
-      <table className="table table-bordered">
-        <thead>
-          <tr>
-            <th>{t('admin:export_management.file')}</th>
-            <th>{t('admin:export_management.growi_version')}</th>
-            <th>{t('admin:export_management.collections')}</th>
-            <th>{t('admin:export_management.exported_at')}</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          {this.props.zipFileStats.map(({ meta, fileName, innerFileStats }) => {
-            return (
-              <tr key={fileName}>
-                <th>{fileName}</th>
-                <td>{meta.version}</td>
-                <td className="text-capitalize">{innerFileStats.map(fileStat => fileStat.collectionName).join(', ')}</td>
-                <td>{meta.exportedAt ? format(new Date(meta.exportedAt), 'yyyy/MM/dd HH:mm:ss') : ''}</td>
-                <td>
-                  <ArchiveFilesTableMenu
-                    fileName={fileName}
-                    onZipFileStatRemove={this.props.onZipFileStatRemove}
-                  />
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+      <div className="table-responsive text-nowrap">
+        <table className="table table-bordered">
+          <thead>
+            <tr>
+              <th>{t('admin:export_management.file')}</th>
+              <th>{t('admin:export_management.growi_version')}</th>
+              <th>{t('admin:export_management.collections')}</th>
+              <th>{t('admin:export_management.exported_at')}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.props.zipFileStats.map(({ meta, fileName, innerFileStats }) => {
+              return (
+                <tr key={fileName}>
+                  <th>{fileName}</th>
+                  <td>{meta.version}</td>
+                  <td className="text-capitalize">{innerFileStats.map(fileStat => fileStat.collectionName).join(', ')}</td>
+                  <td>{meta.exportedAt ? format(new Date(meta.exportedAt), 'yyyy/MM/dd HH:mm:ss') : ''}</td>
+                  <td>
+                    <ArchiveFilesTableMenu
+                      fileName={fileName}
+                      onZipFileStatRemove={this.props.onZipFileStatRemove}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     );
   }