fix(ui): improve signature box responsiveness (#8984)

This PR improves the row/box with signature information used on commit and tag pages: [commit example](096a03eb42), [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>
This commit is contained in:
0ko 2025-09-11 16:20:36 +02:00 committed by Gusted
commit 62f2515138
6 changed files with 13 additions and 18 deletions

View file

@ -208,7 +208,7 @@
</div> </div>
</div> </div>
{{if .Commit.Signature}} {{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"> <div class="tw-flex tw-items-center">
{{if .Verification.Verified}} {{if .Verification.Verified}}
{{if ne .Verification.SigningUser.ID 0}} {{if ne .Verification.SigningUser.ID 0}}

View file

@ -9,7 +9,7 @@
{{$class = (print $class " isWarning")}} {{$class = (print $class " isWarning")}}
{{end}} {{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"> <div class="tw-flex tw-content-center">
{{if $v.Verified}} {{if $v.Verified}}
{{if ne $v.SigningUser.ID 0}} {{if ne $v.SigningUser.ID 0}}

View file

@ -137,7 +137,7 @@ func TestPullCommitSignature(t *testing.T) {
resp := testCtx.Session.MakeRequest(t, req, http.StatusOK) resp := testCtx.Session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, resp.Body) 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)
}) })
}) })
} }

View file

@ -68,8 +68,8 @@ func TestRepoSSHSignedTags(t *testing.T) {
resp := MakeRequest(t, req, http.StatusOK) resp := MakeRequest(t, req, http.StatusOK)
doc := NewHTMLParser(t, resp.Body) doc := NewHTMLParser(t, resp.Body)
doc.AssertElement(t, ".tag-signature-row .gitea-unlock", !isSigned) doc.AssertElement(t, ".signature-row .gitea-unlock", !isSigned)
doc.AssertElement(t, ".tag-signature-row .gitea-lock", isSigned) doc.AssertElement(t, ".signature-row .gitea-lock", isSigned)
} }
t.Run("unverified", func(t *testing.T) { t.Run("unverified", func(t *testing.T) {

View file

@ -775,7 +775,7 @@ func TestViewCommitSignature(t *testing.T) {
resp = testCtx.Session.MakeRequest(t, req, http.StatusOK) resp = testCtx.Session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, resp.Body) htmlDoc := NewHTMLParser(t, resp.Body)
htmlDoc.AssertElement(t, ".commit-header-row.message.isSigned.isVerified", true) htmlDoc.AssertElement(t, ".signature-row.message.isSigned.isVerified", true)
}) })
}) })
} }

View file

@ -1972,21 +1972,16 @@ details.repo-search-result summary::marker {
padding-top: 15px; padding-top: 15px;
} }
.commit-header-row, .commit-header-row {
.tag-signature-row {
min-height: 50px !important; min-height: 50px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
} }
.ui.attached.message.tag-signature-row { .signature-row {
border-radius: var(--border-radius); display: flex;
} flex-wrap: wrap;
padding: 0.75rem 1rem !important;
.tag-signature-row div { gap: 0.5rem 1rem;
margin-top: auto !important; justify-content: space-between;
margin-bottom: auto !important;
display: inline-block !important;
} }
.commit-header-buttons { .commit-header-buttons {