From ad5ce5980063850a23cb2ed0d1d74000000bb8d1 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 25 Jul 2023 18:17:41 +0800
Subject: [PATCH] Improve commit graph alignment and truncating (#26112)

Fix #26101

![image](https://github.com/go-gitea/gitea/assets/2114189/7507d201-822e-4534-8b20-e659d56b1268)
---
 templates/repo/graph/commits.tmpl | 18 +++++++++---------
 web_src/css/features/gitgraph.css |  7 ++++++-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl
index f5fc27315a..8652a72052 100644
--- a/templates/repo/graph/commits.tmpl
+++ b/templates/repo/graph/commits.tmpl
@@ -31,27 +31,27 @@
 					<span class="message gt-dib gt-ellipsis gt-mr-3">
 						<span>{{RenderCommitMessage $.Context $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span>
 					</span>
-					<span class="tags gt-df gt-ac gt-mr-2">
+					<span class="commit-refs gt-df gt-ac gt-mr-2">
 						{{range $commit.Refs}}
 							{{$refGroup := .RefGroup}}
 							{{if eq $refGroup "pull"}}
 								{{if or (not $.HidePRRefs) (SliceUtils.Contains $.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 gt-mr-2" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
-										{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}#{{.ShortName}}
+									<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
+										{{svg "octicon-git-pull-request"}} #{{.ShortName}}
 									</a>
 								{{end}}
 							{{else if eq $refGroup "tags"}}
-								<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
-									{{svg "octicon-tag" 16 "gt-mr-2"}}{{.ShortName}}
+								<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
+									{{svg "octicon-tag"}} {{.ShortName}}
 								</a>
 							{{else if eq $refGroup "remotes"}}
-								<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
-									{{svg "octicon-cross-reference" 16 "gt-mr-2"}}{{.ShortName}}
+								<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
+									{{svg "octicon-cross-reference"}} {{.ShortName}}
 								</a>
 							{{else if eq $refGroup "heads"}}
-								<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
-									{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.ShortName}}
+								<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
+									{{svg "octicon-git-branch"}} {{.ShortName}}
 								</a>
 							{{else}}
 								<!-- Unknown ref type .Name -->
diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css
index 0ca611d641..a49e930948 100644
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@@ -109,8 +109,13 @@
   background-color: var(--color-secondary-alpha-30);
 }
 
-#git-graph-container #rev-list .tags a.button {
+#git-graph-container #rev-list .commit-refs .button {
   padding: 2px 4px;
+  margin-right: 0.25em;
+  display: inline-block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #git-graph-container #rev-list .sha.label {