Fix overflow in commit graph (go-gitea#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: go-gitea#17944 * Make it work with dynamic width * use span * use explicit none Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Chianina · Mar 28, 2022 · 5e03a89 · 5e03a89
1 parent d310ce3
commit 5e03a89
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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; }