From 0383e2e15a666561fae429061c7c54bfaae89ea7 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Wed, 14 May 2025 23:13:50 +0000
Subject: [PATCH] fix(ui): improve force-push compare line layout (#7746)

On large screens, use grid to force right position of the button.

On small screens, just left it hang out wherever it fits. It's not possible to not make it hide behind mergebox while keeping `float`, and with grid it would overflow too much.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7746
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
---
 templates/repo/issue/view_content/comments.tmpl | 17 ++++++++++-------
 web_src/css/repo.css                            | 13 ++++++++-----
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index f7d4f7c96e..9eb9307f9f 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -549,18 +549,21 @@
 			<div class="timeline-item event" id="{{.HashTag}}">
 				<span class="badge">{{svg "octicon-repo-push"}}</span>
 				<span class="text grey muted-links">
-					{{template "shared/user/authorlink" .Poster}}
 					{{if .IsForcePush}}
-						{{ctx.Locale.Tr "repo.issues.force_push_codes" $.Issue.PullRequest.HeadBranch (ShortSha .OldCommit) ($.Issue.Repo.CommitLink .OldCommit) (ShortSha .NewCommit) ($.Issue.Repo.CommitLink .NewCommit) $createdStr "ui sha"}}
+						<span class="forced-push">
+							<span>
+								{{template "shared/user/authorlink" .Poster}}
+								{{ctx.Locale.Tr "repo.issues.force_push_codes" $.Issue.PullRequest.HeadBranch (ShortSha .OldCommit) ($.Issue.Repo.CommitLink .OldCommit) (ShortSha .NewCommit) ($.Issue.Repo.CommitLink .NewCommit) $createdStr "ui sha"}}
+							</span>
+							{{if $.Issue.PullRequest.BaseRepo.Name}}
+								<a href="{{$.Issue.PullRequest.BaseRepo.Link}}/compare/{{PathEscape .OldCommit}}..{{PathEscape .NewCommit}}" rel="nofollow" class="ui compare label">{{ctx.Locale.Tr "repo.issues.force_push_compare"}}</a>
+							{{end}}
+						</span>
 					{{else}}
+						{{template "shared/user/authorlink" .Poster}}
 						{{ctx.Locale.TrN (len .Commits) "repo.issues.push_commit_1" "repo.issues.push_commits_n" (len .Commits) $createdStr}}
 					{{end}}
 				</span>
-				{{if and .IsForcePush $.Issue.PullRequest.BaseRepo.Name}}
-				<span class="tw-float-right comparebox">
-					<a href="{{$.Issue.PullRequest.BaseRepo.Link}}/compare/{{PathEscape .OldCommit}}..{{PathEscape .NewCommit}}" rel="nofollow" class="ui compare label">{{ctx.Locale.Tr "repo.issues.force_push_compare"}}</a>
-				</span>
-				{{end}}
 			</div>
 			{{if not .IsForcePush}}
 				{{template "repo/commits_list_small" dict "comment" . "root" $}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 3eae8f33f7..8b43e4bbf4 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -904,15 +904,18 @@ td .commit-summary {
   background: var(--color-orange-badge-hover-bg) !important;
 }
 
-.repository.view.issue .comment-list .timeline-item .comparebox {
-  line-height: 32px;
-  vertical-align: middle;
+@media (min-width: 768px) {
+  .repository.view.issue .comment-list .timeline-item .forced-push {
+    display: grid;
+    grid-auto-flow: column;
+    column-gap: 1rem;
+  }
 }
 
-.repository.view.issue .comment-list .timeline-item .comparebox .compare.label {
+.repository.view.issue .comment-list .timeline-item .compare.label {
   font-size: 1rem;
-  margin: 0;
   border: 1px solid var(--color-light-border);
+  height: fit-content;
 }
 
 @media (max-width: 767.98px) {