From 62f2515138fe33ef5261548cd5ba90a2d09ef5bc Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Thu, 11 Sep 2025 16:20:36 +0200
Subject: [PATCH] fix(ui): improve signature box responsiveness (#8984)

This PR improves the row/box with signature information used on commit and tag pages: [commit example](https://codeberg.org/Gusted/smithy/commit/096a03eb425ff69a255c21ed72dc9b80eb2f3462), [tag example](https://codeberg.org/forgejo/forgejo/releases/tag/v1.4.0-rc2). It improves padding consistency, mainly on mobile, and cleans up code a bit. Instead of relying on min-height the box now uses paddings so overflown text is never too close to borders.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8984
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
---
 templates/repo/commit_header.tmpl         |  2 +-
 templates/repo/tag/verification_line.tmpl |  2 +-
 tests/integration/pull_commit_test.go     |  2 +-
 tests/integration/repo_signed_tag_test.go |  4 ++--
 tests/integration/repo_test.go            |  2 +-
 web_src/css/repo.css                      | 19 +++++++------------
 6 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/templates/repo/commit_header.tmpl b/templates/repo/commit_header.tmpl
index f0c094c9bd..6926a95300 100644
--- a/templates/repo/commit_header.tmpl
+++ b/templates/repo/commit_header.tmpl
@@ -208,7 +208,7 @@
 		</div>
 </div>
 {{if .Commit.Signature}}
-	<div class="ui bottom attached message tw-text-left tw-flex tw-items-center tw-justify-between commit-header-row tw-flex-wrap tw-mb-0 {{$class}}">
+	<div class="ui bottom attached message signature-row tw-mb-0 {{$class}}">
 		<div class="tw-flex tw-items-center">
 			{{if .Verification.Verified}}
 				{{if ne .Verification.SigningUser.ID 0}}
diff --git a/templates/repo/tag/verification_line.tmpl b/templates/repo/tag/verification_line.tmpl
index 781f627e0c..f89ca91343 100644
--- a/templates/repo/tag/verification_line.tmpl
+++ b/templates/repo/tag/verification_line.tmpl
@@ -9,7 +9,7 @@
 		{{$class = (print $class " isWarning")}}
 	{{end}}
 
-	<div class="ui bottom attached message tw-text-left tw-flex tw-mb-4 tw-content-center tw-justify-between tag-signature-row tw-flex-wrap {{$class}}">
+	<div class="ui bottom attached message signature-row tw-mb-4 tw-rounded {{$class}}">
 		<div class="tw-flex tw-content-center">
 			{{if $v.Verified}}
 				{{if ne $v.SigningUser.ID 0}}
diff --git a/tests/integration/pull_commit_test.go b/tests/integration/pull_commit_test.go
index 8a632fa338..1f9a6ffd22 100644
--- a/tests/integration/pull_commit_test.go
+++ b/tests/integration/pull_commit_test.go
@@ -137,7 +137,7 @@ func TestPullCommitSignature(t *testing.T) {
 			resp := testCtx.Session.MakeRequest(t, req, http.StatusOK)
 
 			htmlDoc := NewHTMLParser(t, resp.Body)
-			htmlDoc.AssertElement(t, "#diff-commit-header .commit-header-row.message.isSigned.isVerified", true)
+			htmlDoc.AssertElement(t, "#diff-commit-header .signature-row.message.isSigned.isVerified", true)
 		})
 	})
 }
diff --git a/tests/integration/repo_signed_tag_test.go b/tests/integration/repo_signed_tag_test.go
index 16d8841304..0ef256ef5f 100644
--- a/tests/integration/repo_signed_tag_test.go
+++ b/tests/integration/repo_signed_tag_test.go
@@ -68,8 +68,8 @@ func TestRepoSSHSignedTags(t *testing.T) {
 		resp := MakeRequest(t, req, http.StatusOK)
 		doc := NewHTMLParser(t, resp.Body)
 
-		doc.AssertElement(t, ".tag-signature-row .gitea-unlock", !isSigned)
-		doc.AssertElement(t, ".tag-signature-row .gitea-lock", isSigned)
+		doc.AssertElement(t, ".signature-row .gitea-unlock", !isSigned)
+		doc.AssertElement(t, ".signature-row .gitea-lock", isSigned)
 	}
 
 	t.Run("unverified", func(t *testing.T) {
diff --git a/tests/integration/repo_test.go b/tests/integration/repo_test.go
index 898d0d1fa6..f8b926e8be 100644
--- a/tests/integration/repo_test.go
+++ b/tests/integration/repo_test.go
@@ -775,7 +775,7 @@ func TestViewCommitSignature(t *testing.T) {
 			resp = testCtx.Session.MakeRequest(t, req, http.StatusOK)
 
 			htmlDoc := NewHTMLParser(t, resp.Body)
-			htmlDoc.AssertElement(t, ".commit-header-row.message.isSigned.isVerified", true)
+			htmlDoc.AssertElement(t, ".signature-row.message.isSigned.isVerified", true)
 		})
 	})
 }
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index ac671cf0ad..e8d32ab09b 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1972,21 +1972,16 @@ details.repo-search-result summary::marker {
   padding-top: 15px;
 }
 
-.commit-header-row,
-.tag-signature-row {
+.commit-header-row {
   min-height: 50px !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
 }
 
-.ui.attached.message.tag-signature-row {
-  border-radius: var(--border-radius);
-}
-
-.tag-signature-row div {
-  margin-top: auto !important;
-  margin-bottom: auto !important;
-  display: inline-block !important;
+.signature-row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.75rem 1rem !important;
+  gap: 0.5rem 1rem;
+  justify-content: space-between;
 }
 
 .commit-header-buttons {