From a64c774b75559f1564c6d5894aecbede97404087 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Fri, 4 Mar 2022 17:54:59 +0800
Subject: [PATCH 1/2] [tags] 'Tagged Files' dialog: improvement

---
 frontend/src/components/dialog/list-taggedfiles-dialog.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js
index b6d111f5f4..c6c41289c5 100644
--- a/frontend/src/components/dialog/list-taggedfiles-dialog.js
+++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js
@@ -77,9 +77,9 @@ class ListTaggedFilesDialog extends React.Component {
             <thead>
               <tr>
                 <th width='45%' className="ellipsis">{gettext('Name')}</th>
-                <th width='27%'>{gettext('Size')}</th>
-                <th width='18%'>{gettext('Last Update')}</th>
-                <th width='10%'></th>
+                <th width='22%'>{gettext('Size')}</th>
+                <th width='25%'>{gettext('Last Update')}</th>
+                <th width='8%'></th>
               </tr>
             </thead>
             <tbody>
@@ -154,7 +154,7 @@ class TaggedFile extends React.Component {
       </tr>
       :
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
-        <td className="name"><a href={href} target='_blank'>{taggedFile.filename}</a></td>
+        <td><a href={href} target='_blank' className="d-inline-block w-100 ellipsis" title={taggedFile.filename}>{taggedFile.filename}</a></td>
         <td>{Utils.bytesToSize(taggedFile.size)}</td>
         <td>{moment.unix(taggedFile.mtime).fromNow()}</td>
         <td><a href="#" role="button" aria-label={gettext('Delete')} title={gettext('Delete')} className={className} onClick={this.deleteFile}></a></td>

From e89ddd856b6578a3d5bb85ba4d2cdb2a2961fb86 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Mon, 7 Mar 2022 11:19:18 +0800
Subject: [PATCH 2/2] [tags] 'Tagged Files' dialog: modified UI

---
 frontend/src/components/dialog/list-taggedfiles-dialog.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js
index c6c41289c5..056647e170 100644
--- a/frontend/src/components/dialog/list-taggedfiles-dialog.js
+++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js
@@ -70,15 +70,15 @@ class ListTaggedFilesDialog extends React.Component {
   render() {
     let taggedFileList = this.state.taggedFileList;
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} style={{maxWidth: '678px'}}>
         <ModalHeader toggle={this.props.onClose}>{gettext('Tagged Files')}</ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
             <thead>
               <tr>
-                <th width='45%' className="ellipsis">{gettext('Name')}</th>
-                <th width='22%'>{gettext('Size')}</th>
-                <th width='25%'>{gettext('Last Update')}</th>
+                <th width='50%' className="ellipsis">{gettext('Name')}</th>
+                <th width='20%'>{gettext('Size')}</th>
+                <th width='22%'>{gettext('Last Update')}</th>
                 <th width='8%'></th>
               </tr>
             </thead>