Fix file table overflows (#12603)

- Fix overflow regression from https://github.com/go-gitea/gitea/pull/12553.
- Fix submodule columns stretching the table
- Refactor template to share more HTML nodes
- Introduce CSS helper classes

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

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")
+	files := htmlDoc.doc.Find("#repo-files-table > TBODY > TR > TD.name > SPAN.truncate")
 	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

@@ -43,23 +43,22 @@
 			{{$entry := index $item 0}}
 			{{$commit := index $item 1}}
 			<tr>
+				<td class="name four wide">
+					<span class="truncate">
 						{{if $entry.IsSubModule}}
-					<td>
 							{{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>
+								<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>
 							{{else}}
-							{{$entry.Name}} @ {{ShortSha $commit.RefID}}
+								{{$entry.Name}}<span class="at">@</span>{{ShortSha $commit.RefID}}
 							{{end}}
-					</td>
 						{{else}}
-					<td class="name four wide">
 							{{if $entry.IsDir}}
 								{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
 								{{$subJumpablePath := SubJumpablePath $subJumpablePathName}}
 								{{svg "octicon-file-directory" 16}}
-							<a href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
+								<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $subJumpablePathName}}" title="{{$subJumpablePathName}}">
 									{{if eq (len $subJumpablePath) 2}}
 										<span class="jumpable-path">{{index  $subJumpablePath 0}}</span>{{index  $subJumpablePath 1}}
 									{{else}}
@@ -68,12 +67,15 @@
 								</a>
 							{{else}}
 								{{svg (printf "octicon-%s" (EntryIcon $entry)) 16}}
-							<a href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
+								<a class="flex-1" href="{{EscapePound $.TreeLink}}/{{EscapePound $entry.Name}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
 							{{end}}
-					</td>
 						{{end}}
+					</span>
+				</td>
 				<td class="message nine wide">
-					<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary | RenderEmoji}}</a>
+					<span class="truncate">
+						<a class="flex-1" 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>
 			</tr>

web_src/less/_repository.less

@@ -361,14 +361,23 @@
           width: 120px;
         }
 
-        > a {
+        .truncate {
-          width: calc(100% - 8px); /* prevent overflow into adjacant cell */
+          display: inline-flex;
-          display: inline-block;
+          align-items: center;
-          padding-top: 8px;
-          padding-bottom: 8px;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          width: 100%;
+        }
+
+        a {
+          padding-top: 8px;
+          padding-bottom: 8px;
+        }
+
+        .at {
+          margin-left: 3px;
+          margin-right: 3px;
         }
 
         > * {

web_src/less/helpers.less

@@ -0,0 +1,6 @@
+.flex-0 {
+  flex: 0;
+}
+.flex-1 {
+  flex: 1;
+}

web_src/less/index.less

@@ -1,5 +1,6 @@
 @import "~font-awesome/css/font-awesome.css";
 
+@import "./helpers.less";
 @import "./features/gitgraph.less";
 @import "./features/animations.less";
 @import "./markdown/mermaid.less";