fix(ui): make releases filtering responsive (#8399)

* Improve consistency with other list pages (issues, PRs)
* Improve mobile usability
* Refresh the look a bit

---

Bug fix:

Currently on mobile filters get squashed and are not very usable:
https://codeberg.org/attachments/5d6ad65e-6ae5-4819-a3dc-75fb4fe77960

This commit:
https://codeberg.org/attachments/6eb0843e-49fd-4687-ab38-9ba60a6cc6c8

---

Consistency fix:

Use same element order and spacing as in issue list:
https://codeberg.org/attachments/9cdb042d-cdce-4243-a610-a1eabe3f4fc3

On desktop this means full width search bar:
https://codeberg.org/attachments/bdd50c3d-76f3-4ad0-884e-5717f9c86154

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8399
Reviewed-by: Gusted <gusted@noreply.codeberg.org>

templates/repo/release_tag_header.tmpl

@@ -2,24 +2,23 @@
 {{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}
 
 {{if $canReadReleases}}
-	<div class="tw-flex">
+	<div class="list-header">
-		<div class="tw-flex-1 tw-flex tw-items-center">
+		<div class="switch">
-			<h2 class="ui compact small menu small-menu-items">
+			<a class="{{if and .PageIsReleaseList (not .PageIsSingleTag)}}active {{end}}item" href="{{.RepoLink}}/releases{{if .Keyword}}?q={{.Keyword}}{{end}}">{{ctx.Locale.TrN .NumReleases "repo.n_release_one" "repo.n_release_few" (ctx.Locale.PrettyNumber .NumReleases)}}</a>
-				<a class="{{if and .PageIsReleaseList (not .PageIsSingleTag)}}active {{end}}item" href="{{.RepoLink}}/releases{{if .Keyword}}?q={{.Keyword}}{{end}}">{{ctx.Locale.TrN .NumReleases "repo.n_release_one" "repo.n_release_few" (ctx.Locale.PrettyNumber .NumReleases)}}</a>
+			{{if $canReadCode}}
-				{{if $canReadCode}}
+				<a class="{{if or .PageIsTagList .PageIsSingleTag}}active {{end}}item" href="{{.RepoLink}}/tags{{if .Keyword}}?q={{.Keyword}}{{end}}">{{ctx.Locale.TrN .NumTags "repo.n_tag_one" "repo.n_tag_few" (ctx.Locale.PrettyNumber .NumTags)}}</a>
-					<a class="{{if or .PageIsTagList .PageIsSingleTag}}active {{end}}item" href="{{.RepoLink}}/tags{{if .Keyword}}?q={{.Keyword}}{{end}}">{{ctx.Locale.TrN .NumTags "repo.n_tag_one" "repo.n_tag_few" (ctx.Locale.PrettyNumber .NumTags)}}</a>
+			{{end}}
-				{{end}}
-			</h2>
 		</div>
 		{{if .ShowReleaseSearch}}
-			<form class="ignore-dirty tw-w-1/5 tw-mr-3" method="get">
+			<form class="ignore-dirty list-header-search release-list-search" method="get">
 				{{template "shared/search/combo" dict "Value" .Keyword}}
 			</form>
 		{{end}}
-		<div class="button-row">
+		<div class="button-sequence release-list-buttons">
 			{{if .EnableFeed}}
-				<a class="ui small button tw-h-full" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
+				<a class="ui small button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
-					{{svg "octicon-rss" 16}} {{ctx.Locale.Tr "rss_feed"}}
+					{{svg "octicon-rss" 16}}
+					<label class="not-mobile">{{ctx.Locale.Tr "rss_feed"}}</label>
 				</a>
 			{{end}}
 			{{if and (not .PageIsTagList) .CanCreateRelease}}

tests/integration/release_test.go

@@ -70,7 +70,7 @@ func checkLatestReleaseAndCount(t *testing.T, session *TestSession, repoURL, ver
 	// Check release count in the counter on the Release/Tag switch, as well as that the tab is highlighted
 	if count < 10 { // Only check values less than 10, should be enough attempts before this test cracks
 		// 10 is the pagination limit, but the counter can have more than that
-		releaseTab := htmlDoc.doc.Find(".repository.releases .ui.compact.menu a.active.item[href$='/releases']")
+		releaseTab := htmlDoc.doc.Find(".repository.releases .switch a.active.item[href$='/releases']")
 		assert.Contains(t, releaseTab.Text(), strconv.Itoa(count)+" release") // Could be "1 release" or "4 releases"
 	}
 

tests/integration/repo_tag_test.go

@@ -41,11 +41,11 @@ func TestTagViewWithoutRelease(t *testing.T) {
 
 	// Test that the tags sub-menu is active and has a counter
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	tagsTab := htmlDoc.Find(".small-menu-items .active.item[href$='/tags']")
+	tagsTab := htmlDoc.Find(".switch .active.item[href$='/tags']")
 	assert.Contains(t, tagsTab.Text(), "4 tags")
 
 	// Test that the release sub-menu isn't active
-	releaseLink := htmlDoc.Find(".small-menu-items .item[href$='/releases']")
+	releaseLink := htmlDoc.Find(".switch .item[href$='/releases']")
 	assert.False(t, releaseLink.HasClass("active"))
 
 	// Test that the title is displayed

web_src/css/repo/release-tag.css

@@ -110,6 +110,12 @@
   .repository.new.release .field button {
     margin-bottom: 1em;
   }
+  .release-list-search {
+    order: 2 !important;
+  }
+  .release-list-buttons {
+    margin-left: auto;
+  }
 }
 
 .repository.new.release .field .attachment_edit {