Increase clickable area on files table links (#12553)

Author: silverwind

integrations/repo_test.go

@@ -148,7 +148,7 @@ func TestViewRepoWithSymlinks(t *testing.T) {
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name > SPAN")
+	files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name")
 	items := files.Map(func(i int, s *goquery.Selection) string {
 		cls, _ := s.Find("SVG").Attr("class")
 		file := strings.Trim(s.Find("A").Text(), " \t\n")

templates/repo/view_list.tmpl

@@ -45,41 +45,35 @@
 			<tr>
 				{{if $entry.IsSubModule}}
 					<td>
-						<span class="truncate">
-							{{svg "octicon-file-submodule" 16}}
-							{{$refURL := $commit.RefURL AppUrl $.Repository.FullName}}
-							{{if $refURL}}
-								<a href="{{$refURL}}">{{$entry.Name}}</a> @ <a href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a>
-							{{else}}
-								{{$entry.Name}} @ {{ShortSha $commit.RefID}}
-							{{end}}
-						</span>
+						{{svg "octicon-file-submodule" 16}}
+						{{$refURL := $commit.RefURL AppUrl $.Repository.FullName}}
+						{{if $refURL}}
+							<a href="{{$refURL}}">{{$entry.Name}}</a> @ <a href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a>
+						{{else}}
+							{{$entry.Name}} @ {{ShortSha $commit.RefID}}
+						{{end}}
 					</td>
 				{{else}}
 					<td class="name four wide">
-						<span class="truncate">
-							{{if $entry.IsDir}}
-								{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
-								{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
-								{{svg "octicon-file-directory" 16}}
-								<a href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
-									{{if eq (len $subJumpablePath) 2}}
-										<span class="jumpable-path">{{index  $subJumpablePath 0}}</span>{{index  $subJumpablePath 1}}
-									{{else}}
-										{{index $subJumpablePath 0}}
-									{{end}}
-								</a>
-							{{else}}
-								{{svg (printf "octicon-%s" (EntryIcon $entry)) 16}}
-								<a href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
-							{{end}}
-						</span>
+						{{if $entry.IsDir}}
+							{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
+							{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
+							{{svg "octicon-file-directory" 16}}
+							<a href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
+								{{if eq (len $subJumpablePath) 2}}
+									<span class="jumpable-path">{{index  $subJumpablePath 0}}</span>{{index  $subJumpablePath 1}}
+								{{else}}
+									{{index $subJumpablePath 0}}
+								{{end}}
+							</a>
+						{{else}}
+							{{svg (printf "octicon-%s" (EntryIcon $entry)) 16}}
+							<a href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
+						{{end}}
 					</td>
 				{{end}}
 				<td class="message nine wide">
-					<span class="truncate">
-						<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a>
-					</span>
+					<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a>
 				</td>
 				<td class="text right age three wide">{{TimeSince $commit.Committer.When $.Lang}}</td>
 			</tr>

web_src/less/_repository.less

@@ -345,8 +345,8 @@
             }
 
             td {
-                padding-top: 8px;
-                padding-bottom: 8px;
+                padding-top: 0;
+                padding-bottom: 0;
                 overflow: initial;
 
                 &.name {
@@ -361,14 +361,19 @@
                     width: 120px;
                 }
 
-                .truncate {
+                > a {
+                    width: calc(100% - 8px); /* prevent overflow into adjacant cell */
                     display: inline-block;
-                    max-width: 100%;
+                    padding-top: 8px;
+                    padding-bottom: 8px;
                     overflow: hidden;
                     text-overflow: ellipsis;
-                    vertical-align: top;
                     white-space: nowrap;
                 }
+
+                > * {
+                    vertical-align: middle;
+                }
             }
 
             td.message .isSigned {