diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
index 06eae4295e630..5f0a105a51c21 100644
--- a/templates/repo/diff/compare.tmpl
+++ b/templates/repo/diff/compare.tmpl
@@ -105,7 +105,7 @@
 				</div>
 			</div>
 		</div>
-		<a href="{{.RepoLink}}/compare/{{PathEscapeSegments .BaseBranch}}{{.OtherCompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments $.HeadBranch}}" title="{{ctx.Locale.Tr "repo.pulls.switch_comparison_type"}}">{{svg "octicon-arrow-left" 16}}<div class="gt-w-100 gt-text-center -gt-mt-4">{{.CompareSeparator}}</div></a>
+		<a href="{{.RepoLink}}/compare/{{PathEscapeSegments .BaseBranch}}{{.OtherCompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments $.HeadBranch}}" title="{{ctx.Locale.Tr "repo.pulls.switch_comparison_type"}}">{{svg "octicon-arrow-left" 16}}<div class="gt-w-100 gt-text-center gt--mt-4">{{.CompareSeparator}}</div></a>
 		<div class="ui floating filter dropdown">
 			<div class="ui basic small button">
 				<span class="text">{{if $.PageIsComparePull}}{{ctx.Locale.Tr "repo.pulls.compare_compare"}}{{else}}{{ctx.Locale.Tr "repo.compare.compare_head"}}{{end}}: {{$HeadCompareName}}:{{$.HeadBranch}}</span>
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 3a64fd06bc588..43b2374f43c8b 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -137,6 +137,12 @@ Gitea's private styles use `g-` prefix.
 .gt-m-4 { margin: 1rem !important; }
 .gt-m-5 { margin: 2rem !important; }
 
+.gt--m-1 { margin: -.125rem !important; }
+.gt--m-2 { margin: -.25rem !important; }
+.gt--m-3 { margin: -.5rem !important; }
+.gt--m-4 { margin: -1rem !important; }
+.gt--m-5 { margin: -2rem !important; }
+
 .gt-ml-0 { margin-left: 0 !important; }
 .gt-ml-1 { margin-left: .125rem !important; }
 .gt-ml-2 { margin-left: .25rem !important; }
@@ -144,6 +150,12 @@ Gitea's private styles use `g-` prefix.
 .gt-ml-4 { margin-left: 1rem !important; }
 .gt-ml-5 { margin-left: 2rem !important; }
 
+.gt--ml-1 { margin-left: -.125rem !important; }
+.gt--ml-2 { margin-left: -.25rem !important; }
+.gt--ml-3 { margin-left: -.5rem !important; }
+.gt--ml-4 { margin-left: -1rem !important; }
+.gt--ml-5 { margin-left: -2rem !important; }
+
 .gt-mr-0 { margin-right: 0 !important; }
 .gt-mr-1 { margin-right: .125rem !important; }
 .gt-mr-2 { margin-right: .25rem !important; }
@@ -151,6 +163,12 @@ Gitea's private styles use `g-` prefix.
 .gt-mr-4 { margin-right: 1rem !important; }
 .gt-mr-5 { margin-right: 2rem !important; }
 
+.gt--mr-1 { margin-right: -.125rem !important; }
+.gt--mr-2 { margin-right: -.25rem !important; }
+.gt--mr-3 { margin-right: -.5rem !important; }
+.gt--mr-4 { margin-right: -1rem !important; }
+.gt--mr-5 { margin-right: -2rem !important; }
+
 .gt-mt-0 { margin-top: 0 !important; }
 .gt-mt-1 { margin-top: .125rem !important; }
 .gt-mt-2 { margin-top: .25rem !important; }
@@ -158,11 +176,11 @@ Gitea's private styles use `g-` prefix.
 .gt-mt-4 { margin-top: 1rem !important; }
 .gt-mt-5 { margin-top: 2rem !important; }
 
-.-gt-mt-1 { margin-top: -.125rem !important; }
-.-gt-mt-2 { margin-top: -.25rem !important; }
-.-gt-mt-3 { margin-top: -.5rem !important; }
-.-gt-mt-4 { margin-top: -1rem !important; }
-.-gt-mt-5 { margin-top: -2rem !important; }
+.gt--mt-1 { margin-top: -.125rem !important; }
+.gt--mt-2 { margin-top: -.25rem !important; }
+.gt--mt-3 { margin-top: -.5rem !important; }
+.gt--mt-4 { margin-top: -1rem !important; }
+.gt--mt-5 { margin-top: -2rem !important; }
 
 .gt-mb-0 { margin-bottom: 0 !important; }
 .gt-mb-1 { margin-bottom: .125rem !important; }
@@ -171,6 +189,12 @@ Gitea's private styles use `g-` prefix.
 .gt-mb-4 { margin-bottom: 1rem !important; }
 .gt-mb-5 { margin-bottom: 2rem !important; }
 
+.gt--mb-1 { margin-bottom: -.125rem !important; }
+.gt--mb-2 { margin-bottom: -.25rem !important; }
+.gt--mb-3 { margin-bottom: -.5rem !important; }
+.gt--mb-4 { margin-bottom: -1rem !important; }
+.gt--mb-5 { margin-bottom: -2rem !important; }
+
 .gt-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
 .gt-mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; }
 .gt-mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; }
@@ -178,6 +202,12 @@ Gitea's private styles use `g-` prefix.
 .gt-mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
 .gt-mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }
 
+.gt--mx-1 { margin-left: -.125rem !important; margin-right: -.125rem !important; }
+.gt--mx-2 { margin-left: -.25rem !important; margin-right: -.25rem !important; }
+.gt--mx-3 { margin-left: -.5rem !important; margin-right: -.5rem !important; }
+.gt--mx-4 { margin-left: -1rem !important; margin-right: -1rem !important; }
+.gt--mx-5 { margin-left: -2rem !important; margin-right: -2rem !important; }
+
 .gt-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
 .gt-my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; }
 .gt-my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
@@ -185,6 +215,12 @@ Gitea's private styles use `g-` prefix.
 .gt-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
 .gt-my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
 
+.gt--my-1 { margin-top: -.125rem !important; margin-bottom: -.125rem !important; }
+.gt--my-2 { margin-top: -.25rem !important; margin-bottom: -.25rem !important; }
+.gt--my-3 { margin-top: -.5rem !important; margin-bottom: -.5rem !important; }
+.gt--my-4 { margin-top: -1rem !important; margin-bottom: -1rem !important; }
+.gt--my-5 { margin-top: -2rem !important; margin-bottom: -2rem !important; }
+
 .gt-m-auto  { margin: auto !important; }
 .gt-mx-auto { margin-left: auto !important; margin-right: auto !important; }
 .gt-my-auto { margin-top: auto !important; margin-bottom: auto !important; }