From 379a5241c69cbedd8cdba04f57f3ee8c50083957 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 11 Dec 2021 06:12:18 -0800
Subject: [PATCH] Fix overflow in commit graph (#17947)

* Fix overflow in commit graph

Limit commit message to 50% width. This is rather crude but should work
for common use cases with not too-long author names.

Fixes: https://github.com/go-gitea/gitea/issues/17944

* Make it work with dynamic width

* use span

* use explicit none

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
 templates/repo/graph/commits.tmpl   | 12 +++++++-----
 web_src/less/features/gitgraph.less |  1 +
 web_src/less/helpers.less           |  6 ++++++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl
index d054462ebc..d213c53e96 100644
--- a/templates/repo/graph/commits.tmpl
+++ b/templates/repo/graph/commits.tmpl
@@ -28,27 +28,29 @@
 							{{- end -}}
 						</a>
 					</span>
-					<span class="message df ac mr-2">{{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span>
+					<span class="message dib ellipsis mr-2">
+						<span>{{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span>
+					</span>
 					<span class="tags df ac">
 						{{range $commit.Refs}}
 							{{$refGroup := .RefGroup}}
 							{{if eq $refGroup "pull"}}
 								{{if or (not $.HidePRRefs) (containGeneric $.SelectedBranches .Name)}}
 									<!-- it's intended to use issues not pulls, if it's a pull you will get redirected -->
-									<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
+									<a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
 										{{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}}
 									</a>
 								{{end}}
 							{{else if eq $refGroup "tags"}}
-								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
+								<a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
 									{{svg "octicon-tag" 16 "mr-2"}}{{.ShortName}}
 								</a>
 							{{else if eq $refGroup "remotes"}}
-								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
+								<a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
 									{{svg "octicon-cross-reference" 16 "mr-2"}}{{.ShortName}}
 								</a>
 							{{else if eq $refGroup "heads"}}
-								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
+								<a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
 									{{svg "octicon-git-branch" 16 "mr-2"}}{{.ShortName}}
 								</a>
 							{{else}}
diff --git a/web_src/less/features/gitgraph.less b/web_src/less/features/gitgraph.less
index f664a31d57..25dcc02159 100644
--- a/web_src/less/features/gitgraph.less
+++ b/web_src/less/features/gitgraph.less
@@ -137,6 +137,7 @@
     .author .ui.avatar.image {
       width: auto;
       height: 18px;
+      max-width: none;
     }
   }
 
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index a4e8243cc7..f35412fd0e 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -28,6 +28,12 @@
   word-wrap: break-word !important;
 }
 
+.ellipsis {
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  text-overflow: ellipsis !important;
+}
+
 .full-screen-width { width: 100vw !important; }
 .full-screen-height { height: 100vh !important; }