From 7e4619df83b1269dc074ea2f7102b6424cbd3152 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Sat, 7 Feb 2026 19:15:14 +0100
Subject: [PATCH] feat(ui): responsive releases list (#11080)

## Changes

I've made releases list more usable on narrow viewports while trying keep the layout unchanged for desktop viewports.

To support these changes large amount of Tailwind classes were converted to regular CSS to be applied conditionally via `@media`. While it was possible to just adjust the Tailwind classes to achieve the same behavior, there's a positive effect which is that the repeating HTML of releases generated by template's range is much less verbose and contains fewer long duplicated lines of Tailwind classes.

## Preview

### Desktop

Not much changed, but the dot between tag and release name is no more.

|Before|After|
|-|-|
|![bd](/attachments/a87bf050-03ba-4035-8a0e-7ab4f6e877a2)|![2d](/attachments/e0c2e052-01c6-4078-b06e-f8ef7b803690)|

### Mobile

|Before|After|
|-|-|
|![bm](/attachments/f63a606f-f3f8-435d-8378-0979e93cf7bd)|![2m](/attachments/0cb6086d-1def-4a86-bb0e-4131e50aae3b)|

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11080
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
---
 templates/repo/release/list.tmpl       |  66 ++++----
 templates/repo/release_tag_header.tmpl |   6 +-
 tests/e2e/release.test.e2e.ts          |  43 ++++-
 tests/integration/release_test.go      |  18 +-
 tests/integration/repo_tag_test.go     |   8 +-
 web_src/css/repo.css                   |  25 ---
 web_src/css/repo/release-tag.css       | 218 +++++++++++++++++--------
 7 files changed, 243 insertions(+), 141 deletions(-)

diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 9520e5eb6c..cc9610c77c 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -7,35 +7,38 @@
 		<ul id="release-list">
 			{{range $idx, $info := .Releases}}
 				{{$release := $info.Release}}
-				<li class="ui grid">
-					<div class="ui four wide column meta">
+				{{if ne $idx 0}}
+					<div class="divider only-mobile"></div>
+				{{end}}
+				<li>
+					<div class="meta">
 						<a class="muted" href="{{if not (and $release.Sha1 ($.Permission.CanRead $.UnitTypeCode))}}#{{else}}{{$.RepoLink}}/src/tag/{{$release.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "tw-mr-1"}}{{$release.TagName}}</a>
 						{{if and $release.Sha1 ($.Permission.CanRead $.UnitTypeCode)}}
 							<a class="muted tw-font-mono" href="{{$.RepoLink}}/src/commit/{{$release.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha $release.Sha1}}</a>
 							{{template "repo/branch_dropdown" dict "root" $ "release" $release}}
 						{{end}}
 					</div>
-					<div class="ui twelve wide column detail">
-						<div class="tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-mb-2">
-							<h4 class="release-list-title tw-break-anywhere">
-								<a href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>
-								{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
-								{{if $release.IsDraft}}
-									<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
-								{{else if $release.IsPrerelease}}
-									<span class="ui orange label">{{ctx.Locale.Tr "repo.release.prerelease"}}</span>
-								{{else if (not $release.IsTag)}}
-									<span class="ui green label">{{ctx.Locale.Tr "repo.release.stable"}}</span>
-								{{end}}
-							</h4>
-							<div>
-								{{if and $.CanCreateRelease (not $release.IsTag)}}
-									<a class="muted" data-tooltip-content="{{ctx.Locale.Tr "repo.release.edit"}}" href="{{$.RepoLink}}/releases/edit/{{$release.TagName | PathEscapeSegments}}" rel="nofollow">
-										{{svg "octicon-pencil"}}
-									</a>
-								{{end}}
-							</div>
+					<div class="release-title-wrap">
+						<h4>
+							<a href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>
+							{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
+							{{if $release.IsDraft}}
+								<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
+							{{else if $release.IsPrerelease}}
+								<span class="ui orange label">{{ctx.Locale.Tr "repo.release.prerelease"}}</span>
+							{{else if (not $release.IsTag)}}
+								<span class="ui green label">{{ctx.Locale.Tr "repo.release.stable"}}</span>
+							{{end}}
+						</h4>
+						<div>
+							{{if and $.CanCreateRelease (not $release.IsTag)}}
+								<a class="muted" data-tooltip-content="{{ctx.Locale.Tr "repo.release.edit"}}" href="{{$.RepoLink}}/releases/edit/{{$release.TagName | PathEscapeSegments}}" rel="nofollow">
+									{{svg "octicon-pencil"}}
+								</a>
+							{{end}}
 						</div>
+					</div>
+					<div class="detail">
 						<p class="text grey">
 							<span class="author">
 							{{if $release.OriginalAuthor}}
@@ -59,15 +62,17 @@
 							{{end}}
 						</p>
 						{{template "repo/tag/verification_line" (dict "ctxData" $ "release" $release)}}
-						<div class="markup desc">
-							{{$release.RenderedNote}}
-						</div>
+						{{if $release.RenderedNote}}
+							<div class="markup desc">
+								{{$release.RenderedNote}}
+							</div>
+						{{end}}
 						{{$hasReleaseAttachment := gt (len $release.Attachments) 0}}
 						{{$hasArchiveLinks := and (not $.DisableDownloadSourceArchives) (not $release.IsDraft) (not $release.HideArchiveLinks) ($.Permission.CanRead $.UnitTypeCode)}}
 						{{if or $hasArchiveLinks $hasReleaseAttachment}}
-							<div class="divider"></div>
+							<div class="divider not-mobile"></div>
 							<details class="download" {{if eq $idx 0}}open{{end}}>
-								<summary class="tw-my-4">
+								<summary>
 									{{ctx.Locale.Tr "repo.release.downloads"}}
 								</summary>
 								<ul class="list">
@@ -76,7 +81,7 @@
 											<a class="archive-link tw-flex-1 flex-text-inline tw-font-bold" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.zip" rel="nofollow" type="application/zip">
 												{{svg "octicon-file-zip" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.source_code"}} (ZIP)
 											</a>
-											<div class="tw-mr-1">
+											<div class="tw-mr-2">
 												<span class="text grey">{{ctx.Locale.TrPluralString .Release.ArchiveDownloadCount.Zip "release.n_downloads" (ctx.Locale.PrettyNumber .Release.ArchiveDownloadCount.Zip)}}</span>
 											</div>
 											<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.system_generated"}}">
@@ -87,7 +92,7 @@
 											<a class="archive-link tw-flex-1 flex-text-inline tw-font-bold" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow" type="application/gzip">
 												{{svg "octicon-file-zip" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.source_code"}} (TAR.GZ)
 											</a>
-											<div class="tw-mr-1">
+											<div class="tw-mr-2">
 												<span class="text grey">{{ctx.Locale.TrPluralString .Release.ArchiveDownloadCount.TarGz "release.n_downloads" (ctx.Locale.PrettyNumber .Release.ArchiveDownloadCount.TarGz)}}</span>
 											</div>
 											<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.system_generated"}}">
@@ -104,7 +109,7 @@
 												</a>
 											</li>
 										{{else}}
-											<li class="max-sm:tw-flex-col max-sm:tw-gap-2">
+											<li class="attachment">
 												<a class="tw-flex-1 flex-text-inline tw-font-bold" target="_blank" rel="nofollow" href="{{.DownloadURL}}" download>
 													{{svg "octicon-package" 16 "tw-mr-1"}}{{.Name}}
 												</a>
@@ -117,7 +122,6 @@
 								</ul>
 							</details>
 						{{end}}
-						<div class="dot"></div>
 					</div>
 				</li>
 			{{end}}
diff --git a/templates/repo/release_tag_header.tmpl b/templates/repo/release_tag_header.tmpl
index 48d6eccfe6..9044bd6043 100644
--- a/templates/repo/release_tag_header.tmpl
+++ b/templates/repo/release_tag_header.tmpl
@@ -14,15 +14,15 @@
 				{{template "shared/search/combo" dict "Value" .Keyword}}
 			</form>
 		{{end}}
-		<div class="button-sequence release-list-buttons">
+		<div class="small button-sequence release-list-buttons">
 			{{if .EnableFeed}}
-				<a class="ui small button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
+				<a class="secondary button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
 					{{svg "octicon-rss" 16}}
 					<label class="not-mobile">{{ctx.Locale.Tr "rss_feed"}}</label>
 				</a>
 			{{end}}
 			{{if and (not .PageIsTagList) .CanCreateRelease}}
-				<a class="ui small primary button" href="{{$.RepoLink}}/releases/new">
+				<a class="primary button" href="{{$.RepoLink}}/releases/new">
 					{{ctx.Locale.Tr "repo.release.new_release"}}
 				</a>
 			{{end}}
diff --git a/tests/e2e/release.test.e2e.ts b/tests/e2e/release.test.e2e.ts
index 2d51c10714..fedb1c8f1d 100644
--- a/tests/e2e/release.test.e2e.ts
+++ b/tests/e2e/release.test.e2e.ts
@@ -1,3 +1,6 @@
+// Copyright 2024-2026 The Forgejo Authors
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 // @watch start
 // models/repo/attachment.go
 // modules/structs/attachment.go
@@ -16,7 +19,7 @@ import {validate_form} from './shared/forms.ts';
 test.use({user: 'user2'});
 
 test.describe('Releases', () => {
-  test('External Release Attachments', async ({page, isMobile}) => {
+  test('External release attachments', async ({page, isMobile}) => {
     test.skip(isMobile);
 
     // Click "New release"
@@ -102,6 +105,44 @@ test.describe('Releases', () => {
     await expect(page.locator('input[name=title]')).toHaveValue('v2.0');
   });
 
+  test('UI reaction to lengthy UGC', async ({page, viewport, isMobile}) => {
+    await page.goto('/user2/repo2/releases/new');
+
+    await page.locator('input[name=tag_name]').pressSequentially('2.0');
+    await page.locator('input[name=title]').pressSequentially('v'.repeat(200));
+    await page.locator('textarea[name=content]').pressSequentially('v'.repeat(200)); // Description
+
+    // Submit form. Mobile Chrome can't press the button in Playwright (not a Forgejo
+    // bug). Work around this by pressing Enter on submit button
+    await page.getByRole('button', {name: 'Publish release'}).press('Enter');
+
+    // Check widths of UI elements
+    await page.goto('/user2/repo2/releases');
+    const release = page.locator('#release-list > li:has(a[href$="/tag/2.0"])');
+    // Release entry should be less than viewport
+    expect((await release.boundingBox()).width).toBeLessThan(viewport.width);
+    if (isMobile) {
+      const metaWidth = (await release.locator('.meta').boundingBox()).width;
+      const titleWidth = (await release.locator('.release-title-wrap').boundingBox()).width;
+      const detailsWidth = (await release.locator('.detail').boundingBox()).width;
+      // In row layout they all should be similar to the viewport length, accounting
+      // for 8px margins on each side
+      expect(metaWidth).toBeCloseTo(viewport.width - 16, 0);
+      expect(titleWidth).toBeCloseTo(viewport.width - 16, 0);
+      expect(detailsWidth).toBeCloseTo(viewport.width - 16, 0);
+      // They also should all be all same width
+      expect(metaWidth).toBe(titleWidth);
+      expect(titleWidth).toBe(detailsWidth);
+    } else {
+      // Left and right columns should be less than 25% and 75% of viewport width
+      // But on wide screens there's a lot of additional emptiness, so we can't
+      // match columns' width against the viewport, only make sure they fit
+      expect((await release.locator('.meta').boundingBox()).width).toBeLessThan(viewport.width * 0.75);
+      expect((await release.locator('.release-title-wrap').boundingBox()).width).toBeLessThan(viewport.width * 0.75);
+      expect((await release.locator('.detail').boundingBox()).width).toBeLessThan(viewport.width * 0.75);
+    }
+  });
+
   test.afterEach(async ({page}) => {
     // Delete release
     const response = await page.goto('/user2/repo2/releases/edit/2.0');
diff --git a/tests/integration/release_test.go b/tests/integration/release_test.go
index de082bda8a..483822e2ac 100644
--- a/tests/integration/release_test.go
+++ b/tests/integration/release_test.go
@@ -72,9 +72,9 @@ func checkLatestReleaseAndCount(t *testing.T, session *TestSession, repoURL, ver
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	labelText := htmlDoc.doc.Find("#release-list > li .detail .label").First().Text()
+	labelText := htmlDoc.doc.Find("#release-list > li > .release-title-wrap .label").First().Text()
 	assert.Equal(t, label, labelText)
-	titleText := htmlDoc.doc.Find("#release-list > li .detail h4 a").First().Text()
+	titleText := htmlDoc.doc.Find("#release-list > li > .release-title-wrap h4 a").First().Text()
 	assert.Equal(t, version, titleText)
 
 	// Check release count in the counter on the Release/Tag switch, as well as that the tab is highlighted
@@ -255,13 +255,13 @@ func TestViewReleaseListNoLogin(t *testing.T) {
 	rsp := MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, rsp.Body)
-	releases := htmlDoc.Find("#release-list li.ui.grid")
+	releases := htmlDoc.Find("ul#release-list > li")
 	assert.Equal(t, 5, releases.Length())
 
 	links := make([]string, 0, 5)
 	commitsToMain := make([]string, 0, 5)
 	releases.Each(func(i int, s *goquery.Selection) {
-		link, exist := s.Find(".release-list-title a").Attr("href")
+		link, exist := s.Find(".release-title-wrap h4 a").Attr("href")
 		if !exist {
 			return
 		}
@@ -311,12 +311,12 @@ func TestViewReleaseListLogin(t *testing.T) {
 	rsp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, rsp.Body)
-	releases := htmlDoc.Find("#release-list li.ui.grid")
+	releases := htmlDoc.Find("ul#release-list > li")
 	assert.Equal(t, 3, releases.Length())
 
 	links := make([]string, 0, 5)
 	releases.Each(func(i int, s *goquery.Selection) {
-		link, exist := s.Find(".release-list-title a").Attr("href")
+		link, exist := s.Find(".release-title-wrap h4 a").Attr("href")
 		if !exist {
 			return
 		}
@@ -342,12 +342,12 @@ func TestViewReleaseListKeyword(t *testing.T) {
 	rsp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, rsp.Body)
-	releases := htmlDoc.Find("#release-list li.ui.grid")
+	releases := htmlDoc.Find("ul#release-list > li")
 	assert.Equal(t, 1, releases.Length())
 
 	links := make([]string, 0, 5)
 	releases.Each(func(i int, s *goquery.Selection) {
-		link, exist := s.Find(".release-list-title a").Attr("href")
+		link, exist := s.Find(".release-title-wrap h4 a").Attr("href")
 		if !exist {
 			return
 		}
@@ -370,7 +370,7 @@ func TestViewReleaseListKeywordNoPagination(t *testing.T) {
 	rsp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, rsp.Body)
-	releases := htmlDoc.Find("#release-list li.ui.grid")
+	releases := htmlDoc.Find("ul#release-list > li")
 	assert.Equal(t, 1, releases.Length())
 
 	pagination := htmlDoc.Find("div.pagination")
diff --git a/tests/integration/repo_tag_test.go b/tests/integration/repo_tag_test.go
index 1773d9bde5..735cb73126 100644
--- a/tests/integration/repo_tag_test.go
+++ b/tests/integration/repo_tag_test.go
@@ -51,11 +51,11 @@ func TestTagViewWithoutRelease(t *testing.T) {
 	assert.False(t, releaseLink.HasClass("active"))
 
 	// Test that the title is displayed
-	releaseTitle := strings.TrimSpace(htmlDoc.Find("h4.release-list-title > a").Text())
+	releaseTitle := strings.TrimSpace(htmlDoc.Find(".release-title-wrap h4 > a").Text())
 	assert.Equal(t, "no-release", releaseTitle)
 
 	// Test that there is no "Stable" link
-	htmlDoc.AssertElement(t, "h4.release-list-title > span.ui.green.label", false)
+	htmlDoc.AssertElement(t, ".release-title-wrap h4 > span.ui.green.label", false)
 
 	// Ensure that there is no "Edit" button
 	htmlDoc.AssertElement(t, ".detail a.muted > svg.octicon-pencil", false)
@@ -148,7 +148,7 @@ func TestCreateNewTagProtected(t *testing.T) {
 			req := NewRequestf(t, "GET", "/%s/releases/tag/v-1.1", repo.FullName())
 			resp := MakeRequest(t, req, http.StatusOK)
 			htmlDoc := NewHTMLParser(t, resp.Body)
-			tagsTab := htmlDoc.Find(".release-list-title")
+			tagsTab := htmlDoc.Find(".release-title-wrap h4")
 			assert.Contains(t, tagsTab.Text(), "force update v2")
 		})
 	})
@@ -180,7 +180,7 @@ func TestSyncRepoTags(t *testing.T) {
 				req := NewRequestf(t, "GET", "/%s/releases/tag/v2", repo.FullName())
 				resp := MakeRequest(t, req, http.StatusOK)
 				htmlDoc := NewHTMLParser(t, resp.Body)
-				tagsTab := htmlDoc.Find(".release-list-title")
+				tagsTab := htmlDoc.Find(".release-title-wrap h4")
 				assert.Contains(t, tagsTab.Text(), "this is an annotated tag")
 			}
 
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 2ead2b4797..767a6c2a2c 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1750,31 +1750,6 @@ details.repo-search-result summary::marker {
   border-bottom: 1px solid var(--color-warning-border);
 }
 
-.repository .release-tag-name .ui.label.isSigned,
-.repository .release-list-title .ui.label.isSigned {
-  padding: 0 0.5em;
-  box-shadow: none;
-}
-
-.repository .release-tag-name .ui.label.isSigned .avatar,
-.repository .release-list-title .ui.label.isSigned .avatar {
-  margin-left: .5rem;
-}
-
-.repository .release-tag-name .ui.label.isSigned.isVerified,
-.repository .release-list-title .ui.label.isSigned.isVerified {
-  border: 1px solid var(--color-success-border);
-  background-color: var(--color-success-bg);
-  color: var(--color-success-text);
-}
-
-.repository .release-tag-name .ui.label.isSigned.isWarning,
-.repository .release-list-title .ui.label.isSigned.isWarning {
-  border: 1px solid var(--color-warning-border);
-  background-color: var(--color-warning-bg);
-  color: var(--color-warning-text);
-}
-
 .repository .segment.reactions.dropdown .menu,
 .repository .select-reaction.dropdown .menu {
   right: 0 !important;
diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
index 0d5b9d3a27..b421b13562 100644
--- a/web_src/css/repo/release-tag.css
+++ b/web_src/css/repo/release-tag.css
@@ -1,75 +1,145 @@
-.repository.releases #release-list {
-  margin-top: 12px;
-  padding-top: 12px;
-  padding-left: 0;
+#release-list {
+  margin-top: 10px; /* Overriding browser default for <ul>, same value as divider */
+  padding-left: 0; /* Unset browser default */
 }
 
-.repository.releases #release-list .release-list-title {
+#release-list > li {
+  .meta {
+    display: flex;
+    gap: 1em;
+  }
+  .detail .desc {
+    margin-block-start: 1rem;
+  }
+}
+
+/* Column layout (desktop) */
+@media (min-width: 768px) {
+  #release-list > li {
+    display: grid;
+    grid-template-columns: 25% 75%;
+    justify-content: end;
+
+    .meta {
+      grid-column: 1;
+      grid-row: 1 / span 2;
+      flex-direction: column;
+      text-align: right;
+
+      /* Align contents of meta column with release name */
+      padding-top: 11px;
+    }
+
+    .detail {
+      grid-column: 2;
+      grid-row: 2;
+      padding-block-end: 1.5rem;
+    }
+    :is(.detail, .release-title-wrap) {
+      /* Line separating columns on wide screen */
+      border-left: 1px solid var(--color-secondary);
+      padding-inline-start: 1rem;
+      margin-inline-start: 1rem;
+    }
+    .detail .download summary {
+      margin-block: 1rem;
+    }
+  }
+}
+
+/* Row layout (mobile) */
+@media (max-width: 767.98px) {
+  #release-list > li {
+    display: flex;
+    flex-direction: column;
+
+    .meta {
+      order: 1;
+      flex-direction: row;
+      align-items: center;
+      margin-block-end: 0.75rem;
+    }
+    .detail {
+      order: 2;
+    }
+    .detail .text {
+      /* Same as `summary` */
+      margin-block-end: 0.75rem;
+    }
+    .detail .download summary {
+      margin-block: 0.75rem;
+    }
+  }
+
+  .release-list-search {
+    order: 2 !important;
+  }
+  .release-list-buttons {
+    margin-left: auto;
+  }
+}
+
+#release-list .release-title-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding-block-end: 0.5rem;
+}
+
+#release-list .release-title-wrap h4 {
   font-size: 2rem;
   font-weight: var(--font-weight-normal);
   display: flex;
   align-items: center;
   gap: 0.25em;
   margin: 0;
-}
-
-.repository.releases #release-list > li .meta {
-  padding-top: 25px;
-  position: relative;
-  text-align: right;
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-}
-
-.repository.releases #release-list > li .detail {
-  padding-bottom: 20px;
-  border-left: 1px solid var(--color-secondary);
+  overflow-wrap: anywhere;
 }
 
 .repository.releases #release-list > li .detail .author img {
   margin-bottom: 2px; /* the legacy trick to align the avatar vertically, no better solution at the moment */
 }
 
-.repository.releases #release-list > li .detail .download .list {
+/* List of downloads */
+#release-list > li .detail .download .list {
+  /* Override <ul> default */
   padding-left: 0;
+  /* Compensate emptiness that opener provides when <details> is closed */
+  padding-block-end: 1rem;
+
+  hr {
+    height: 8px;
+    margin: 0;
+  }
+
+  li {
+    background: var(--color-light);
+    border: 1px solid var(--color-secondary);
+    border-top: none;
+    display: flex;
+    justify-content: space-between;
+    padding: 8px;
+  }
+
+  :is(li:first-child, .start-gap + hr + li) {
+    border-top: 1px solid var(--color-secondary);
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+  }
+
+  :is(li:last-child, .start-gap) {
+    border-bottom: 1px solid var(--color-secondary);
+    border-bottom-left-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+  }
 }
 
-.repository.releases #release-list > li .detail .download .list li {
-  background: var(--color-light);
-  border: 1px solid var(--color-secondary);
-  border-top: none;
-  display: flex;
-  justify-content: space-between;
-  padding: 8px;
-}
-
-.repository.releases #release-list > li .detail .download .list :is(li:first-child, .start-gap + hr + li) {
-  border-top: 1px solid var(--color-secondary);
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-}
-
-.repository.releases #release-list > li .detail .download .list :is(li:last-child, .start-gap) {
-  border-bottom: 1px solid var(--color-secondary);
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
-.repository.releases #release-list > li .detail .download .list hr {
-  height: 8px;
-  margin: 0;
-}
-
-.repository.releases #release-list > li .detail .dot {
-  width: 10px;
-  height: 10px;
-  background-color: var(--color-secondary-dark-3);
-  position: absolute;
-  left: -5.5px;
-  top: 30px;
-  border-radius: var(--border-radius-full);
-  border: 2.5px solid var(--color-body);
+@media (max-width: 640px) {
+  #release-list > li .detail .download .list .attachment {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 }
 
 .repository.tags #tags-table .tag {
@@ -85,10 +155,6 @@
   min-width: 500px;
 }
 
-.repository.new.release .target #tag-name {
-  margin-top: -4px;
-}
-
 .repository.new.release .target .at {
   margin-left: -5px;
   margin-right: 5px;
@@ -99,15 +165,6 @@
   padding-bottom: 10px;
 }
 
-@media (max-width: 767.98px) {
-  .release-list-search {
-    order: 2 !important;
-  }
-  .release-list-buttons {
-    margin-left: auto;
-  }
-}
-
 .repository.new.release .field .attachment_edit {
   max-width: 48em;
 }
@@ -128,3 +185,28 @@
 .ui.ui.ui.tag-label.IsRelease:hover {
   border-color: var(--color-primary-dark-1);
 }
+
+.repository .release-tag-name .ui.label.isSigned,
+.repository .release-title-wrap .ui.label.isSigned {
+  padding: 0 0.5em;
+  box-shadow: none;
+}
+
+.repository .release-tag-name .ui.label.isSigned .avatar,
+.repository .release-title-wrap .ui.label.isSigned .avatar {
+  margin-left: .5rem;
+}
+
+.repository .release-tag-name .ui.label.isSigned.isVerified,
+.repository .release-title-wrap .ui.label.isSigned.isVerified {
+  border: 1px solid var(--color-success-border);
+  background-color: var(--color-success-bg);
+  color: var(--color-success-text);
+}
+
+.repository .release-tag-name .ui.label.isSigned.isWarning,
+.repository .release-title-wrap .ui.label.isSigned.isWarning {
+  border: 1px solid var(--color-warning-border);
+  background-color: var(--color-warning-bg);
+  color: var(--color-warning-text);
+}