Fix New issue button consistency

Fixes https://codeberg.org/forgejo/forgejo/issues/2613
Based on https://codeberg.org/forgejo/forgejo/issues/2613#issuecomment-1654709

- add new class `list-header-issues`;
- add rules that fix button position;
- use variable to keep the vertical offset constant;
- fix gap for edit button.

Co-authored-by: Gusted <gusted@noreply.codeberg.org>

templates/repo/issue/list.tmpl

@@ -14,7 +14,7 @@
 		</div>
 	{{end}}
 
-		<div class="list-header">
+		<div class="list-header list-header-issues">
 			{{template "repo/issue/navbar" .}}
 			{{template "repo/issue/search" .}}
 			{{if not .Repository.IsArchived}}

templates/repo/issue/view_title.tmpl

@@ -14,7 +14,7 @@
 		</h1>
 		<div class="issue-title-buttons">
 			{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
-				<button id="edit-title" class="ui small basic button edit-button not-in-edit{{if .Issue.IsPull}} tw-mr-0{{end}}">{{ctx.Locale.Tr "repo.issues.edit"}}</button>
+				<button id="edit-title" class="ui small basic button edit-button not-in-edit tw-mr-0">{{ctx.Locale.Tr "repo.issues.edit"}}</button>
 			{{end}}
 			{{if not .Issue.IsPull}}
 				<a role="button" class="ui small primary button new-issue-button tw-mr-0" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>

web_src/css/base.css

@@ -21,6 +21,7 @@
   --border-radius-circle: 50%;
   --opacity-disabled: 0.55;
   --height-loading: 16rem;
+  --repo-header-issue-min-height: 41px;
   --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
   --tab-size: 4;
 }

web_src/css/repo.css

@@ -569,6 +569,10 @@
   display: flex;
 }
 
+.issue-title-buttons {
+  gap: 0.5rem;
+}
+
 @media (max-width: 767.98px) {
   .repository.view.issue .issue-title {
     flex-direction: column;
@@ -611,7 +615,7 @@
   line-height: 40px;
   margin: 0;
   padding-right: 0.25rem;
-  min-height: 41px; /* avoid layout shift on edit */
+  min-height: var(--repo-header-issue-min-height);
 }
 
 .repository.view.issue .issue-title h1 .ui.input {
@@ -2180,7 +2184,7 @@
   margin: 0 !important;
   position: relative;
   color: var(--color-text);
-  min-height: 41px;
+  min-height: var(--repo-header-issue-min-height);
   background-color: var(--color-box-header);
   display: flex;
   justify-content: space-between;

web_src/css/repo/issue-list.css

@@ -16,6 +16,14 @@
   flex-wrap: wrap;
 }
 
+.issue-list-new.button {
+  margin-right: 0;
+}
+
+.list-header-issues {
+  min-height: var(--repo-header-issue-min-height);
+}
+
 @media (max-width: 767.98px) {
   .issue-list-navbar {
     order: 0;