Optimize Layout Styles of Filelist (#33920)

Align items

---------

Co-authored-by: wxiaoguang <[email protected]>

Author: kerwin612

templates/repo/view_list.tmpl

@@ -14,19 +14,21 @@
 			{{$entry := $item.Entry}}
 			{{$commit := $item.Commit}}
 			{{$submoduleFile := $item.SubmoduleFile}}
-			<div class="repo-file-cell name {{if not $commit}}notready{{end}}">
+			<div class="repo-file-cell name muted-links {{if not $commit}}notready{{end}}">
 				{{ctx.RenderUtils.RenderFileIcon $entry}}
 				{{if $entry.IsSubModule}}
 					{{$submoduleLink := $submoduleFile.SubmoduleWebLink ctx}}
 					{{if $submoduleLink}}
-						<a class="muted" href="{{$submoduleLink.RepoWebLink}}">{{$entry.Name}}</a> <span class="at">@</span> <a href="{{$submoduleLink.CommitWebLink}}">{{ShortSha $submoduleFile.RefID}}</a>
+						<a class="entry-name" href="{{$submoduleLink.RepoWebLink}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
+						@ <a class="text primary" href="{{$submoduleLink.CommitWebLink}}">{{ShortSha $submoduleFile.RefID}}</a>
 					{{else}}
-						{{$entry.Name}} <span class="at">@</span> {{ShortSha $submoduleFile.RefID}}
+						<span class="entry-name" title="{{$entry.Name}}">{{$entry.Name}}</span>
+						@ {{ShortSha $submoduleFile.RefID}}
 					{{end}}
 				{{else}}
 					{{if $entry.IsDir}}
 						{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
-						<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
+						<a class="entry-name" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
 							{{$subJumpablePathFields := StringUtils.Split $subJumpablePathName "/"}}
 							{{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}}
 							{{if eq $subJumpablePathFieldLast 0}}
@@ -37,7 +39,7 @@
 							{{end}}
 						</a>
 					{{else}}
-						<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
+						<a class="entry-name" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
 					{{end}}
 				{{end}}
 			</div>

web_src/css/repo/home-file-list.css

@@ -14,10 +14,6 @@
   }
 }
 
-#repo-files-table .repo-file-cell.name .svg {
-  margin-right: 2px;
-}
-
 #repo-files-table .svg.octicon-file-directory-fill,
 #repo-files-table .svg.octicon-file-submodule {
   color: var(--color-primary);
@@ -70,11 +66,25 @@
 }
 
 #repo-files-table .repo-file-cell.name {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  overflow: hidden;
+}
+
+#repo-files-table .repo-file-cell.name > a,
+#repo-files-table .repo-file-cell.name > span {
+  flex-shrink: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+#repo-files-table .repo-file-cell.name .entry-name {
+  flex-shrink: 1;
+  min-width: 3em;
+}
+
 @media (max-width: 767.98px) {
   #repo-files-table .repo-file-cell.name {
     max-width: 35vw;