root path show file_tag && tagged_files_count (#2715)

frontend/src/css/dirent-detail.css

@@ -44,6 +44,8 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .dirent-info .img {
@@ -103,11 +105,16 @@
 .file-tag-list li {
   display: flex;
   align-items: center;
+  max-width: 180px;
 }
 
 .file-tag-list .tag-name {
   display: inline-block;
-  margin-left: 0.5rem;
+  margin-left: 5px;
+  width: 100px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .file-related-files th {

frontend/src/css/dirent-list-item.css

@@ -22,4 +22,8 @@
   height: 1rem;
   top: 50%;
   left: 50%;
+}
+
+.tag-list-title {
+  overflow: hidden;
 }

frontend/src/css/repo-tag.css

@@ -31,6 +31,7 @@
   align-items: center;
   color: #ffffff;
   overflow: hidden;
+  padding: 10px;
 }
 
 .show-tag-selected {
@@ -92,3 +93,35 @@
 .tag-dialog-back:focus {
   color: #444;
 }
+
+.tags-summary-bar {
+  margin: 16px 16px 4px;
+  padding: 0 10px;
+  border: 1px solid #e6e6dd;
+  border-radius: 5px;
+}
+.used-tag-list {
+  list-style: none;
+  line-height: 40px;
+}
+.used-tag-item {
+  display: inline-block;
+  margin: auto 15px;
+}
+.used-tag {
+  display: inline-block;
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+}
+.used-tag-name {
+  margin: 0 0.25rem;
+}
+.used-tag-files {
+  color: #666;
+  font-size: 14px;
+}
+.used-tag-files:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}