modify tag-list css

frontend/src/components/dialog/list-tag-dialog.js

@@ -27,8 +27,8 @@ class TagListItem extends React.Component {
     return(
       <li className="tag-list-item">
         <span className={`tag-demo bg-${color}`}>
-          <td width='90%'>{this.props.item.name}</td>
-          <span onClick={this.onListFileCancel}>{this.props.item.fileCount}</span>
+          <span className="tag-name">{this.props.item.name}</span>
+          <span className="tag-files" onClick={this.onListFileCancel}>{this.props.item.fileCount}{' '}{gettext('files')}</span>
         </span>
         <i className="tag-edit fa fa-pencil" onClick={this.onTagUpdate}></i>
       </li>

frontend/src/components/dialog/list-taggedfiles-dialog.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext, repoID } from '../../utils/constants';
@@ -49,30 +49,26 @@ class ListTaggedFilesDialog extends React.Component {
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Tagged Files')}</ModalHeader>
         <ModalBody>
-          {
-            <table>
-              <thead>
-                <tr>
-                  <th width='25%'>{gettext('Name')}</th>
-                  <th width='25%'>{gettext('Size')}</th>
-                  <th width='25%'>{gettext('Last Update')}</th>
-                  <th width='25%'>{gettext('Parent Path')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {taggedFileList.map((taggedFile, index) => {
-                  return (
-                    <tr key={index}>
-                      <td>{taggedFile.filename}</td>
-                      <td>{Utils.bytesToSize(taggedFile.size)}</td>
-                      <td>{moment.unix(taggedFile.mtime).fromNow()}</td>
-                      <td>{taggedFile.parent_path}</td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          }
+          <table>
+            <thead>
+              <tr>
+                <th width='30%'>{gettext('Name')}</th>
+                <th width='30%'>{gettext('Size')}</th>
+                <th width='40%'>{gettext('Last Update')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {taggedFileList.map((taggedFile, index) => {
+                return (
+                  <tr key={index}>
+                    <td>{taggedFile.filename}</td>
+                    <td>{Utils.bytesToSize(taggedFile.size)}</td>
+                    <td>{moment.unix(taggedFile.mtime).fromNow()}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={this.toggle}>{gettext('Close')}</Button>

frontend/src/css/repo-tag.css

@@ -25,7 +25,16 @@
 
 .tag-list-item .tag-demo:hover {
   border-left: 0.75rem solid #eb8205;
+}
 
+.tag-demo .tag-name {
+  flex: 1;
+}
+
+.tag-demo .tag-files {
+  margin-right: 0.5rem;
+  cursor: pointer;
+  text-decoration: underline;
 }
 
 .tag-list-item .tag-edit {