Fix ellipsis in files table (#12617)

Turns out text ellispsis does not work in combination with flexbox and while wrapping in a display:block can help in some cases, I could not get this to work properly so this changes the truncate to inline-block again and reduces the clickable area to just vertical expansion from the links.
go-gitea · Aug 27, 2020 · f8601f3 · f8601f3
1 parent e25d486
commit f8601f3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
@@ -49,7 +49,7 @@
 							{{svg "octicon-file-submodule" 16}}
 							{{$refURL := $commit.RefURL AppUrl $.Repository.FullName}}
 							{{if $refURL}}
-								<a class="flex-0" href="{{$refURL}}">{{$entry.Name}}</a><span class="at">@</span><a class="flex-1" href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a>
+								<a href="{{$refURL}}">{{$entry.Name}}</a><span class="at">@</span><a href="{{$refURL}}/commit/{{$commit.RefID}}">{{ShortSha $commit.RefID}}</a>
 							{{else}}
 								{{$entry.Name}}<span class="at">@</span>{{ShortSha $commit.RefID}}
 							{{end}}
@@ -58,7 +58,7 @@
 								{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
 								{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
 								{{svg "octicon-file-directory" 16}}
-								<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
+								<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}}
@@ -67,14 +67,14 @@
 								</a>
 							{{else}}
 								{{svg (printf "octicon-%s" (EntryIcon $entry)) 16}}
-								<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
+								<a href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
 							{{end}}
 						{{end}}
 					</span>
 				</td>
 				<td class="message nine wide">
 					<span class="truncate">
-						<a class="flex-1" href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a>
+						<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a>
 					</span>
 				</td>
 				<td class="text right age three wide">{{TimeSince $commit.Committer.When $.Lang}}</td>

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
@@ -362,12 +362,13 @@
         }
 
         .truncate {
-          display: inline-flex;
-          align-items: center;
+          display: inline-block;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           width: 100%;
+          padding-top: 8px;
+          padding-bottom: 8px;
         }
 
         a {