From 379a5241c69cbedd8cdba04f57f3ee8c50083957 Mon Sep 17 00:00:00 2001 From: silverwind 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 --- 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 -}} - {{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}} + + {{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}} + {{range $commit.Refs}} {{$refGroup := .RefGroup}} {{if eq $refGroup "pull"}} {{if or (not $.HidePRRefs) (containGeneric $.SelectedBranches .Name)}} - + {{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}} {{end}} {{else if eq $refGroup "tags"}} - + {{svg "octicon-tag" 16 "mr-2"}}{{.ShortName}} {{else if eq $refGroup "remotes"}} - + {{svg "octicon-cross-reference" 16 "mr-2"}}{{.ShortName}} {{else if eq $refGroup "heads"}} - + {{svg "octicon-git-branch" 16 "mr-2"}}{{.ShortName}} {{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; }