Make Issue/PR/projects more compact, misc CSS tweaks (#24459)

- Remove various horizontal dividers on repo pages that didn't provide
visual benefit
- Remove label/milestone pills on single issue/pr page
- Remove issue-related pill buttons on projects page
- Increase contrast of color-secondary on arc-green
- Improve notifications icon, make circle bigger
- Remove some inline styles
- Fix focus in issue/pr title edit and select all text on button click

### Issue and PR before and after

<img width="1249" alt="Screenshot 2023-05-01 at 11 44 22"
src="https://user-images.githubusercontent.com/115237/235436662-a708288e-84fb-4b2e-a5a2-3a1c17d28f6c.png">
<img width="1248" alt="Screenshot 2023-05-01 at 11 58 51"
src="https://user-images.githubusercontent.com/115237/235437992-f863e483-f3cc-4cc1-8204-fd223647a0c9.png">



### Projects before and after

<img width="1255" alt="Screenshot 2023-05-01 at 11 41 02"
src="https://user-images.githubusercontent.com/115237/235436433-0deb85d6-4e7d-4e74-847f-254cc70a0cf9.png">
<img width="1267" alt="Screenshot 2023-05-01 at 11 40 03"
src="https://user-images.githubusercontent.com/115237/235436431-715b13cb-f78c-4d86-b27a-9229f9738c5b.png">


### Releases before and after

<img width="1243" alt="Screenshot 2023-05-01 at 11 41 12"
src="https://user-images.githubusercontent.com/115237/235436457-b655ee6f-03b8-4595-8d8c-b15ea469e988.png">
<img width="1240" alt="Screenshot 2023-05-01 at 11 40 10"
src="https://user-images.githubusercontent.com/115237/235436456-05a2a0dd-7cbb-4f26-b0d3-4f667df4bb95.png">

### Misc

<img width="58" alt="Screenshot 2023-05-01 at 10 49 13"
src="https://user-images.githubusercontent.com/115237/235432494-936ce995-6e22-47bc-ab2d-c9e93d31987d.png">
<img width="57" alt="Screenshot 2023-05-01 at 18 57 08"
src="https://user-images.githubusercontent.com/115237/235492430-1d32cfe0-0f2c-467c-b2fa-925b27e30e0e.png">


Issue title edit and wrap:

<img width="1238" alt="Screenshot 2023-05-01 at 12 34 40"
src="https://user-images.githubusercontent.com/115237/235441407-d5067a57-e586-4865-a652-282e5944abb4.png">
<img width="1232" alt="Screenshot 2023-05-01 at 12 06 24"
src="https://user-images.githubusercontent.com/115237/235438710-1a543dda-220f-4d87-8f93-f1710c0695f0.png">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

34 files changed, 255 insertions, 320 deletions

diff --git a/templates/org/member/members.tmpl b/templates/org/member/members.tmpl
index d6ab265ea8..3d5b3beebd 100644
--- a/templates/org/member/members.tmpl
+++ b/templates/org/member/members.tmpl
@@ -7,7 +7,7 @@
 		<div class="list">
 			{{range .Members}}
 				<div class="item ui grid">
-					<div class="ui four wide column" style="display: flex;">
+					<div class="ui four wide column gt-df">
 						<a href="{{.HomeLink}}">{{avatar $.Context . 48}}</a>
 						<div>
 							<div class="meta"><a href="{{.HomeLink}}">{{.Name}}</a></div>
diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index 1ef0b0be97..e9e86e5d5d 100644
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -10,7 +10,7 @@
 		{{end}}
 
 		{{template "base/alert" .}}
-		<div class="small-pill-buttons ui compact tiny menu">
+		<div class="small-menu-items ui compact tiny menu">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=open">
 				{{svg "octicon-project-symlink" 16 "gt-mr-3"}}
 				{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
diff --git a/templates/repo/actions/openclose.tmpl b/templates/repo/actions/openclose.tmpl
index 74630187cd..6874115a19 100644
--- a/templates/repo/actions/openclose.tmpl
+++ b/templates/repo/actions/openclose.tmpl
@@ -1,4 +1,4 @@
-<div class="small-pill-buttons ui compact tiny menu">
+<div class="small-menu-items ui compact tiny menu">
 	<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{$.Link}}?workflow={{.CurWorkflow}}&state=open">
 		{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 		{{.locale.Tr "actions.runs.open_tab" $.NumOpenActionRuns}}
diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index 0f79474d10..984899552d 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -1,3 +1,8 @@
+{{/* Attributes:
+* root
+* ContainerClasses
+* (TODO: search "branch_dropdown" in the template direcotry)
+*/}}
 {{$defaultBranch := $.root.BranchName}}
 {{if and .root.IsViewTag (not .noTag)}}
 	{{$defaultBranch = .root.TagName}}
@@ -62,10 +67,10 @@
 	window.config.pageData.branchDropdownDataList.push(data);
 </script>
 
-<div class="fitted item js-branch-tag-selector">
+<div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}">
 	{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
 	<div class="ui floating filter dropdown custom">
-		<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df">
+		<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df gt-m-0">
 			<span class="text gt-df gt-ac gt-mr-2">
 				{{if .release}}
 					{{.root.locale.Tr "repo.release.compare"}}
diff --git a/templates/repo/commits.tmpl b/templates/repo/commits.tmpl
index 2f890a1f9d..1647d69597 100644
--- a/templates/repo/commits.tmpl
+++ b/templates/repo/commits.tmpl
@@ -5,7 +5,7 @@
 		{{template "repo/sub_menu" .}}
 		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw gt-mb-4 gt-mt-3">
 			<div class="gt-df gt-ac">
-				{{template "repo/branch_dropdown" dict "root" .}}
+				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
 				<a href="{{.RepoLink}}/graph" class="ui basic small compact button">
 					<span class="text">
 						{{svg "octicon-git-branch"}}
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index f9dbf49e5b..e7a76cdaf5 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -63,7 +63,7 @@
 		{{template "repo/sub_menu" .}}
 		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw">
 			<div class="gt-df gt-ac gt-fw gt-gap-y-3">
-				{{template "repo/branch_dropdown" dict "root" .}}
+				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
 				{{$n := len .TreeNames}}
 				{{$l := Eval $n "-" 1}}
 				<!-- If home page, show new pr. If not, show breadcrumb -->
diff --git a/templates/repo/issue/labels.tmpl b/templates/repo/issue/labels.tmpl
index 0a25d9c87f..93e264e4cd 100644
--- a/templates/repo/issue/labels.tmpl
+++ b/templates/repo/issue/labels.tmpl
@@ -2,7 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository labels">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar">
+		<div class="navbar gt-mb-4">
 			{{template "repo/issue/navbar" .}}
 			{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
 				<div class="ui right">
@@ -10,7 +10,6 @@
 				</div>
 			{{end}}
 		</div>
-		<div class="ui divider"></div>
 		{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
 			{{template "repo/issue/labels/label_new" .}}
 		{{end}}
diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 8e553ee7bb..a7311c2490 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -17,9 +17,6 @@
 				{{end}}
 			{{end}}
 		</div>
-
-		<div class="ui divider"></div>
-
 		<div id="issue-filters" class="issue-list-toolbar">
 			<div class="issue-list-toolbar-left">
 				{{if $.CanWriteIssuesOrPulls}}
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index ceaad947d2..d7e782e20d 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -2,7 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository milestones">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar">
+		<div class="navbar gt-mb-4">
 			{{template "repo/issue/navbar" .}}
 			{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
 				<div class="ui right">
@@ -10,11 +10,10 @@
 				</div>
 			{{end}}
 		</div>
-		<div class="ui divider"></div>
 		{{template "base/alert" .}}
 
 		<div class="list-header">
-			<div class="small-pill-buttons ui compact tiny menu">
+			<div class="small-menu-items ui compact tiny menu">
 				<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
 					{{svg "octicon-milestone" 16 "gt-mr-3"}}
 					{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
diff --git a/templates/repo/issue/navbar.tmpl b/templates/repo/issue/navbar.tmpl
index da4f17d28e..944c6b194a 100644
--- a/templates/repo/issue/navbar.tmpl
+++ b/templates/repo/issue/navbar.tmpl
@@ -1,4 +1,4 @@
-<h2 class="ui compact small menu header small-pill-buttons">
+<h2 class="ui compact small menu header small-menu-items">
 	<a class="{{if .PageIsLabels}}active {{end}}item" href="{{.RepoLink}}/labels">{{.locale.Tr "repo.labels"}}</a>
 	<a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{.locale.Tr "repo.milestones"}}</a>
 </h2>
diff --git a/templates/repo/issue/new.tmpl b/templates/repo/issue/new.tmpl
index 6abff2adde..780e874bc6 100644
--- a/templates/repo/issue/new.tmpl
+++ b/templates/repo/issue/new.tmpl
@@ -2,10 +2,6 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository new issue">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar">
-			{{template "repo/issue/navbar" .}}
-		</div>
-		<div class="ui divider"></div>
 		{{if .Flash.WarningMsg}}
 			{{/*
 			There's already an importing of alert.tmpl in new_form.tmpl,
diff --git a/templates/repo/issue/openclose.tmpl b/templates/repo/issue/openclose.tmpl
index 6c8529f0ff..a5916ed793 100644
--- a/templates/repo/issue/openclose.tmpl
+++ b/templates/repo/issue/openclose.tmpl
@@ -1,4 +1,4 @@
-<div class="small-pill-buttons ui compact tiny menu">
+<div class="small-menu-items ui compact tiny menu">
 	<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&project={{.ProjectID}}&assignee={{.AssigneeID}}&poster={{.PosterID}}">
 		{{if .PageIsPullList}}
 			{{svg "octicon-git-pull-request" 16 "gt-mr-3"}}
diff --git a/templates/repo/issue/view.tmpl b/templates/repo/issue/view.tmpl
index c92b50444c..1ef9e735bd 100644
--- a/templates/repo/issue/view.tmpl
+++ b/templates/repo/issue/view.tmpl
@@ -2,32 +2,11 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository view issue pull">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="ui two column grid">
-			<div class="column">
-				{{template "repo/issue/navbar" .}}
-			</div>
-			{{if and (not .Repository.IsArchived) (not .Issue.IsPull)}}
-				<div class="column right aligned">
-					{{if .PageIsIssueList}}
-						<a class="ui green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
-					{{else}}
-						<a class="ui green button {{if not .PullRequestCtx.Allowed}}disabled{{end}}" href="{{.RepoLink}}/compare/{{.BranchName | PathEscapeSegments}}...{{.PullRequestCtx.HeadInfoSubURL}}">{{.locale.Tr "repo.pulls.new"}}</a>
-					{{end}}
-				</div>
-			{{end}}
-		</div>
-		<div class="ui divider"></div>
+		{{template "repo/issue/view_title" .}}
 		{{if .Issue.IsPull}}
-			{{template "repo/issue/view_title" .}}
 			{{template "repo/pulls/tab_menu" .}}
-			<div class="ui bottom attached tab pull active" data-tab="request-{{.ID}}">
-				{{template "repo/issue/view_content" .}}
-			</div>
-		{{else}}
-			<div>
-				{{template "repo/issue/view_content" .}}
-			</div>
 		{{end}}
+		{{template "repo/issue/view_content" .}}
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 7d3bce2b6a..e9a82425ba 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -1,13 +1,4 @@
 <div class="ui stackable grid">
-	{{if .Flash}}
-		<div class="sixteen wide column">
-			{{template "base/alert" .}}
-		</div>
-	{{end}}
-	{{if not .Issue.IsPull}}
-		{{template "repo/issue/view_title" .}}
-	{{end}}
-
 	<!-- I know, there is probably a better way to do this (moved from sidebar.tmpl, original author: 6543 @ 2021-02-28) -->
 	<!-- Agree, there should be a better way, eg: introduce window.config.pageData (original author: wxiaoguang @ 2021-09-05) -->
 	<input type="hidden" id="repolink" value="{{$.RepoRelPath}}">
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index cf12daee04..f9febbde01 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -1,107 +1,119 @@
-<div class="sixteen wide column title">
+{{if .Flash}}
+	<div class="sixteen wide column gt-mb-3">
+		{{template "base/alert" .}}
+	</div>
+{{end}}
+<div class="issue-title-header">
 	<div class="issue-title" id="issue-title-wrapper">
-		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
-			<button id="edit-title" class="ui basic button secondary edit-button not-in-edit">{{.locale.Tr "repo.issues.edit"}}</button>
-		{{end}}
-		<h1>
-			<span id="issue-title">{{RenderIssueTitle $.Context .Issue.Title $.RepoLink $.Repository.ComposeMetas | RenderCodeBlock}}</span>
-			<span class="index">#{{.Issue.Index}}</span>
-			<div id="edit-title-input" class="ui input gt-ml-4 gt-hidden">
+		<h1 class="gt-word-break">
+			<span id="issue-title">{{RenderIssueTitle $.Context .Issue.Title $.RepoLink $.Repository.ComposeMetas | RenderCodeBlock}} <span class="index">#{{.Issue.Index}}</span>
+</span>
+			<div id="edit-title-input" class="ui input gt-f1 gt-hidden">
 				<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">
 			</div>
 		</h1>
+		<div class="issue-title-buttons">
+			{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
+				<button id="edit-title" class="ui small basic button secondary edit-button not-in-edit{{if .Issue.IsPull}} gt-mr-0{{end}}">{{.locale.Tr "repo.issues.edit"}}</button>
+			{{end}}
+			{{if not .Issue.IsPull}}
+				<a role="button" class="ui small green button new-issue-button gt-mr-0" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
+			{{end}}
+		</div>
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 			<div class="edit-buttons">
-				<button id="cancel-edit-title" class="ui basic button secondary in-edit gt-hidden">{{.locale.Tr "repo.issues.cancel"}}</button>
-				<button id="save-edit-title" class="ui primary button in-edit gt-hidden" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button>
+				<button id="cancel-edit-title" class="ui small basic button secondary in-edit gt-hidden">{{.locale.Tr "repo.issues.cancel"}}</button>
+				<button id="save-edit-title" class="ui small primary button in-edit gt-hidden gt-mr-0" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button>
 			</div>
 		{{end}}
 	</div>
-	{{if .HasMerged}}
-		<div class="ui purple large label">{{svg "octicon-git-merge" 16}} {{if eq .Issue.PullRequest.Status 3}}{{.locale.Tr "repo.pulls.manually_merged"}}{{else}}{{.locale.Tr "repo.pulls.merged"}}{{end}}</div>
-	{{else if .Issue.IsClosed}}
-		<div class="ui red large label">{{if .Issue.IsPull}}{{svg "octicon-git-pull-request"}}{{else}}{{svg "octicon-issue-closed"}}{{end}} {{.locale.Tr "repo.issues.closed_title"}}</div>
-	{{else if .Issue.IsPull}}
-		{{if .IsPullWorkInProgress}}
-			<div class="ui grey large label">{{svg "octicon-git-pull-request-draft"}} {{.locale.Tr "repo.issues.draft_title"}}</div>
-		{{else}}
-			<div class="ui green large label">{{svg "octicon-git-pull-request"}} {{.locale.Tr "repo.issues.open_title"}}</div>
-		{{end}}
-	{{else}}
-		<div class="ui green large label">{{svg "octicon-issue-opened"}} {{.locale.Tr "repo.issues.open_title"}}</div>
-	{{end}}
-
-	{{if .Issue.IsPull}}
-		{{$headHref := .HeadTarget|Escape}}
-		{{if .HeadBranchLink}}
-			{{$headHref = printf "<a href=\"%s\">%s</a>" (.HeadBranchLink | Escape) $headHref}}
-		{{end}}
-		{{$headHref = printf "%s <a data-tooltip-content=\"%s\" data-clipboard-text=\"%s\">%s</a>" $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
-		{{$baseHref := .BaseTarget|Escape}}
-		{{if .BaseBranchLink}}
-			{{$baseHref = printf "<a href=\"%s\">%s</a>" (.BaseBranchLink | Escape) $baseHref}}
-		{{end}}
-		{{if .Issue.PullRequest.HasMerged}}
-			{{$mergedStr:= TimeSinceUnix .Issue.PullRequest.MergedUnix $.locale}}
-			{{if .Issue.OriginalAuthor}}
-				{{.Issue.OriginalAuthor}}
-				<span class="pull-desc">{{$.locale.Tr "repo.pulls.merged_title_desc" .NumCommits $headHref $baseHref $mergedStr | Safe}}</span>
+	<div class="issue-title-meta">
+		{{if .HasMerged}}
+			<div class="ui purple label issue-state-label">{{svg "octicon-git-merge" 16 "gt-mr-2"}} {{if eq .Issue.PullRequest.Status 3}}{{.locale.Tr "repo.pulls.manually_merged"}}{{else}}{{.locale.Tr "repo.pulls.merged"}}{{end}}</div>
+		{{else if .Issue.IsClosed}}
+			<div class="ui red label issue-state-label">{{if .Issue.IsPull}}{{svg "octicon-git-pull-request"}}{{else}}{{svg "octicon-issue-closed"}}{{end}} {{.locale.Tr "repo.issues.closed_title"}}</div>
+		{{else if .Issue.IsPull}}
+			{{if .IsPullWorkInProgress}}
+				<div class="ui grey label issue-state-label">{{svg "octicon-git-pull-request-draft"}} {{.locale.Tr "repo.issues.draft_title"}}</div>
 			{{else}}
-				<a {{if gt .Issue.PullRequest.Merger.ID 0}}href="{{.Issue.PullRequest.Merger.HomeLink}}"{{end}}>{{.Issue.PullRequest.Merger.GetDisplayName}}</a>
-				<span class="pull-desc">{{$.locale.Tr "repo.pulls.merged_title_desc" .NumCommits $headHref $baseHref $mergedStr | Safe}}</span>
+				<div class="ui green label issue-state-label">{{svg "octicon-git-pull-request"}} {{.locale.Tr "repo.issues.open_title"}}</div>
 			{{end}}
 		{{else}}
-			{{if .Issue.OriginalAuthor}}
-				<span id="pull-desc" class="pull-desc">{{.Issue.OriginalAuthor}} {{$.locale.Tr "repo.pulls.title_desc" .NumCommits $headHref $baseHref | Safe}}</span>
-			{{else}}
-				<span id="pull-desc" class="pull-desc">
-					<a {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
-					{{$.locale.Tr "repo.pulls.title_desc" .NumCommits $headHref $baseHref | Safe}}
-				</span>
-			{{end}}
-			<span id="pull-desc-edit" class="gt-hidden">
-				<div class="ui floating filter dropdown">
-					<div class="ui basic small button">
-						<span class="text">{{.locale.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
-					</div>
-				</div>
-				{{svg "octicon-arrow-right"}}
-				<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
-					<div class="ui basic small button">
-						<span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{.locale.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
-						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-					</div>
-					<div class="menu">
-						<div class="ui icon search input">
-							<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
-							<input name="search" placeholder="{{.locale.Tr "repo.pulls.filter_branch"}}...">
+			<div class="ui green label issue-state-label">{{svg "octicon-issue-opened"}} {{.locale.Tr "repo.issues.open_title"}}</div>
+		{{end}}
+		<div class="gt-ml-3">
+			{{if .Issue.IsPull}}
+				{{$headHref := .HeadTarget|Escape}}
+				{{if .HeadBranchLink}}
+					{{$headHref = printf "<a href=\"%s\">%s</a>" (.HeadBranchLink | Escape) $headHref}}
+				{{end}}
+				{{$headHref = printf "%s <a data-tooltip-content=\"%s\" data-clipboard-text=\"%s\">%s</a>" $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
+				{{$baseHref := .BaseTarget|Escape}}
+				{{if .BaseBranchLink}}
+					{{$baseHref = printf "<a href=\"%s\">%s</a>" (.BaseBranchLink | Escape) $baseHref}}
+				{{end}}
+				{{if .Issue.PullRequest.HasMerged}}
+					{{$mergedStr:= TimeSinceUnix .Issue.PullRequest.MergedUnix $.locale}}
+					{{if .Issue.OriginalAuthor}}
+						{{.Issue.OriginalAuthor}}
+						<span class="pull-desc">{{$.locale.Tr "repo.pulls.merged_title_desc" .NumCommits $headHref $baseHref $mergedStr | Safe}}</span>
+					{{else}}
+						<a {{if gt .Issue.PullRequest.Merger.ID 0}}href="{{.Issue.PullRequest.Merger.HomeLink}}"{{end}}>{{.Issue.PullRequest.Merger.GetDisplayName}}</a>
+						<span class="pull-desc">{{$.locale.Tr "repo.pulls.merged_title_desc" .NumCommits $headHref $baseHref $mergedStr | Safe}}</span>
+					{{end}}
+				{{else}}
+					{{if .Issue.OriginalAuthor}}
+						<span id="pull-desc" class="pull-desc">{{.Issue.OriginalAuthor}} {{$.locale.Tr "repo.pulls.title_desc" .NumCommits $headHref $baseHref | Safe}}</span>
+					{{else}}
+						<span id="pull-desc" class="pull-desc">
+							<a {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
+							{{$.locale.Tr "repo.pulls.title_desc" .NumCommits $headHref $baseHref | Safe}}
+						</span>
+					{{end}}
+					<span id="pull-desc-edit" class="gt-hidden">
+						<div class="ui floating filter dropdown">
+							<div class="ui basic small button">
+								<span class="text">{{.locale.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
+							</div>
 						</div>
-						<div class="scrolling menu" id="branch-select">
-							{{range .Branches}}
-								{{$sameBase := ne $.BaseName $.HeadUserName}}
-								{{$differentBranch := ne . $.HeadBranch}}
-								{{if or $sameBase $differentBranch}}
-									<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-branch="{{.}}">{{$.BaseName}}{{if $.HeadRepo}}/{{$.HeadRepo}}{{end}}:{{.}}</div>
-								{{end}}
-							{{end}}
+						{{svg "octicon-arrow-right"}}
+						<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
+							<div class="ui basic small button">
+								<span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{.locale.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
+								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+							</div>
+							<div class="menu">
+								<div class="ui icon search input">
+									<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
+									<input name="search" placeholder="{{.locale.Tr "repo.pulls.filter_branch"}}...">
+								</div>
+								<div class="scrolling menu" id="branch-select">
+									{{range .Branches}}
+										{{$sameBase := ne $.BaseName $.HeadUserName}}
+										{{$differentBranch := ne . $.HeadBranch}}
+										{{if or $sameBase $differentBranch}}
+											<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-branch="{{.}}">{{$.BaseName}}{{if $.HeadRepo}}/{{$.HeadRepo}}{{end}}:{{.}}</div>
+										{{end}}
+									{{end}}
+								</div>
+							</div>
 						</div>
-					</div>
-				</div>
-			</span>
-		{{end}}
-	{{else}}
-		{{$createdStr:= TimeSinceUnix .Issue.CreatedUnix $.locale}}
-		<span class="time-desc">
-			{{if .Issue.OriginalAuthor}}
-				{{$.locale.Tr "repo.issues.opened_by_fake" $createdStr (.Issue.OriginalAuthor|Escape) | Safe}}
-			{{else if gt .Issue.Poster.ID 0}}
-				{{$.locale.Tr "repo.issues.opened_by" $createdStr (.Issue.Poster.HomeLink|Escape) (.Issue.Poster.GetDisplayName|Escape) | Safe}}
+					</span>
+				{{end}}
 			{{else}}
-				{{$.locale.Tr "repo.issues.opened_by_fake" $createdStr (.Issue.Poster.GetDisplayName|Escape) | Safe}}
+				{{$createdStr:= TimeSinceUnix .Issue.CreatedUnix $.locale}}
+				<span class="time-desc">
+					{{if .Issue.OriginalAuthor}}
+						{{$.locale.Tr "repo.issues.opened_by_fake" $createdStr (.Issue.OriginalAuthor|Escape) | Safe}}
+					{{else if gt .Issue.Poster.ID 0}}
+						{{$.locale.Tr "repo.issues.opened_by" $createdStr (.Issue.Poster.HomeLink|Escape) (.Issue.Poster.GetDisplayName|Escape) | Safe}}
+					{{else}}
+						{{$.locale.Tr "repo.issues.opened_by_fake" $createdStr (.Issue.Poster.GetDisplayName|Escape) | Safe}}
+					{{end}}
+					·
+					{{$.locale.Tr "repo.issues.num_comments" .Issue.NumComments}}
+				</span>
 			{{end}}
-			·
-			{{$.locale.Tr "repo.issues.num_comments" .Issue.NumComments}}
-		</span>
-	{{end}}
-	<div class="ui divider"></div>
+		</div>
+	</div>
 </div>
diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl
index 5cd94c626d..a5f99cee66 100644
--- a/templates/repo/projects/list.tmpl
+++ b/templates/repo/projects/list.tmpl
@@ -2,41 +2,39 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository projects milestones">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar">
-			{{template "repo/issue/navbar" .}}
-			{{if and .CanWriteProjects (not .Repository.IsArchived)}}
-				<div class="ui right">
-					<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a>
+		<div class="navbar gt-mb-4">
+			<div>
+				<div class="small-menu-items ui compact tiny menu">
+					<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
+						{{svg "octicon-project" 16 "gt-mr-3"}}
+						{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
+					</a>
+					<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=closed">
+						{{svg "octicon-check" 16 "gt-mr-3"}}
+						{{.locale.PrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
+					</a>
 				</div>
-			{{end}}
-		</div>
-		<div class="ui divider"></div>
-		{{template "base/alert" .}}
-		<div class="small-pill-buttons ui compact tiny menu">
-			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
-				{{svg "octicon-project" 16 "gt-mr-3"}}
-				{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
-			</a>
-			<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=closed">
-				{{svg "octicon-check" 16 "gt-mr-3"}}
-				{{.locale.PrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
-			</a>
-		</div>
-
-		<div class="ui right floated secondary filter menu">
-			<!-- Sort -->
-			<div class="ui dropdown type jump item">
-				<span class="text">
-					{{.locale.Tr "repo.issues.filter_sort"}}
-					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-				</span>
-				<div class="menu">
-					<a class="{{if eq .SortType "oldest"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&sort=oldest&state={{$.State}}">{{.locale.Tr "repo.issues.filter_sort.oldest"}}</a>
-					<a class="{{if eq .SortType "recentupdate"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&sort=recentupdate&state={{$.State}}">{{.locale.Tr "repo.issues.filter_sort.recentupdate"}}</a>
-					<a class="{{if eq .SortType "leastupdate"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&sort=leastupdate&state={{$.State}}">{{.locale.Tr "repo.issues.filter_sort.leastupdate"}}</a>
+			</div>
+			<div>
+				<!-- Sort -->
+				<div class="ui small dropdown type jump item">
+					<span class="text">
+						{{.locale.Tr "repo.issues.filter_sort"}}
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					</span>
+					<div class="menu">
+						<a class="{{if eq .SortType "oldest"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&sort=oldest&state={{$.State}}">{{.locale.Tr "repo.issues.filter_sort.oldest"}}</a>
+						<a class="{{if eq .SortType "recentupdate"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&sort=recentupdate&state={{$.State}}">{{.locale.Tr "repo.issues.filter_sort.recentupdate"}}</a>
+						<a class="{{if eq .SortType "leastupdate"}}active {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&sort=leastupdate&state={{$.State}}">{{.locale.Tr "repo.issues.filter_sort.leastupdate"}}</a>
+					</div>
 				</div>
+				{{if and .CanWriteProjects (not .Repository.IsArchived)}}
+					<a class="ui small green button gt-ml-4" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a>
+				{{end}}
 			</div>
 		</div>
+		{{template "base/alert" .}}
+
 		<div class="milestone list">
 			{{range .Projects}}
 				<li class="item">
diff --git a/templates/repo/pulls/commits.tmpl b/templates/repo/pulls/commits.tmpl
index bb113da268..bf6e8128d4 100644
--- a/templates/repo/pulls/commits.tmpl
+++ b/templates/repo/pulls/commits.tmpl
@@ -2,18 +2,9 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository view issue pull commits">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar">
-			{{template "repo/issue/navbar" .}}
-			<div class="ui right">
-				<a class="ui green button {{if not .PullRequestCtx.Allowed}}disabled{{end}}" href="{{.RepoLink}}/compare/{{.BranchName | PathEscapeSegments}}...{{.PullRequestCtx.HeadInfoSubURL}}">{{.locale.Tr "repo.pulls.new"}}</a>
-			</div>
-		</div>
-		<div class="ui divider"></div>
 		{{template "repo/issue/view_title" .}}
 		{{template "repo/pulls/tab_menu" .}}
-		<div class="ui bottom attached tab pull active">
-			{{template "repo/commits_table" .}}
-		</div>
+		{{template "repo/commits_table" .}}
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/repo/pulls/files.tmpl b/templates/repo/pulls/files.tmpl
index 1e02dfa397..feec6eae74 100644
--- a/templates/repo/pulls/files.tmpl
+++ b/templates/repo/pulls/files.tmpl
@@ -5,20 +5,10 @@
 
 <div role="main" aria-label="{{.Title}}" class="page-content repository view issue pull files diff">
 	{{template "repo/header" .}}
-	<div class="ui container fluid padded">
-		<div class="navbar">
-			{{template "repo/issue/navbar" .}}
-			<div class="ui right">
-				<a class="ui green button {{if not .PullRequestCtx.Allowed}}disabled{{end}}" href="{{.RepoLink}}/compare/{{.BranchName | PathEscapeSegments}}...{{.PullRequestCtx.HeadInfoSubURL}}">{{.locale.Tr "repo.pulls.new"}}</a>
-			</div>
-		</div>
-		<div class="ui divider"></div>
+	<div class="ui container">
 		{{template "repo/issue/view_title" .}}
 		{{template "repo/pulls/tab_menu" .}}
-		{{template "base/alert" .}}
-		<div class="ui bottom attached tab pull active">
-			{{template "repo/diff/box" .}}
-		</div>
+		{{template "repo/diff/box" .}}
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 3d596a49e2..be0976c1af 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -14,13 +14,11 @@
 		<ul id="release-list">
 			{{range $idx, $release := .Releases}}
 				<li class="ui grid">
-					<div class="ui four wide column meta gt-mt-2">
-							<a class="gt-df gt-ac gt-je muted" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "gt-mr-2"}}{{.TagName}}</a>
+					<div class="ui four wide column meta">
+							<a class="gt-db muted" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "gt-mr-2"}}{{.TagName}}</a>
 							{{if .Sha1}}
-								<span class="commit">
-									<a class="gt-mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "gt-mr-2"}}{{ShortSha .Sha1}}</a>
-								</span>
-								{{template "repo/branch_dropdown" dict "root" $ "release" .}}
+								<a class="gt-mono muted gt-db gt-mt-4 gt-pt-1" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "gt-mr-2"}}{{ShortSha .Sha1}}</a>
+								{{template "repo/branch_dropdown" dict "root" $ "release" . "ContainerClasses" "gt-mt-4"}}
 							{{end}}
 					</div>
 					<div class="ui twelve wide column detail">
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index af753ba670..688d00bd72 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -91,7 +91,7 @@
 							<td>{{$.locale.Tr "repo.settings.mirror_settings.direction.pull"}}</td>
 							<td>{{DateTime "full" .Mirror.UpdatedUnix}}</td>
 							<td class="right aligned">
-								<form method="post" style="display: inline-block">
+								<form method="post gt-dib">
 									{{.CsrfTokenHtml}}
 									<input type="hidden" name="action" value="mirror-sync">
 									<button class="ui primary tiny button inline text-thin">{{$.locale.Tr "repo.settings.sync_mirror"}}</button>
@@ -169,13 +169,13 @@
 							<td>{{$.locale.Tr "repo.settings.mirror_settings.direction.push"}}</td>
 							<td>{{if .LastUpdateUnix}}{{DateTime "full" .LastUpdateUnix}}{{else}}{{$.locale.Tr "never"}}{{end}} {{if .LastError}}<div class="ui red label" data-tooltip-content="{{.LastError}}">{{$.locale.Tr "error"}}</div>{{end}}</td>
 							<td class="right aligned">
-								<form method="post" style="display: inline-block">
+								<form method="post gt-dib">
 									{{$.CsrfTokenHtml}}
 									<input type="hidden" name="action" value="push-mirror-remove">
 									<input type="hidden" name="push_mirror_id" value="{{.ID}}">
 									<button class="ui basic red tiny button inline text-thin">{{$.locale.Tr "remove"}}</button>
 								</form>
-								<form method="post" style="display: inline-block">
+								<form method="post gt-dib">
 									{{$.CsrfTokenHtml}}
 									<input type="hidden" name="action" value="push-mirror-sync">
 									<input type="hidden" name="push_mirror_id" value="{{.ID}}">
diff --git a/templates/repo/sub_menu_release_tag.tmpl b/templates/repo/sub_menu_release_tag.tmpl
index 2795241556..c700893ee6 100644
--- a/templates/repo/sub_menu_release_tag.tmpl
+++ b/templates/repo/sub_menu_release_tag.tmpl
@@ -2,7 +2,7 @@
 {{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}
 
 {{if $canReadReleases}}
-	<h2 class="ui compact small menu header small-pill-buttons">
+	<h2 class="ui compact small menu header small-menu-items">
 		<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
 		{{if $canReadCode}}
 			<a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{.locale.Tr "repo.release.tags"}}</a>
diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
index da7867a225..8878fe93ca 100644
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@@ -61,7 +61,7 @@
 			</div>
 			<div class="twelve wide column content">
 				<div class="list-header">
-					<div class="small-pill-buttons ui compact tiny menu">
+					<div class="small-menu-items ui compact tiny menu">
 						<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
 							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 							{{.locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
index f9d8ae1eb0..207b2d7035 100644
--- a/templates/user/dashboard/milestones.tmpl
+++ b/templates/user/dashboard/milestones.tmpl
@@ -35,7 +35,7 @@
 			</div>
 			<div class="twelve wide column content">
 				<div class="list-header">
-					<div class="small-pill-buttons ui compact tiny menu">
+					<div class="small-menu-items ui compact tiny menu">
 						<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
 							{{svg "octicon-milestone" 16 "gt-mr-3"}}
 							{{.locale.PrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
diff --git a/templates/user/notification/notification_subscriptions.tmpl b/templates/user/notification/notification_subscriptions.tmpl
index 6d3262ad6d..df69a4dad1 100644
--- a/templates/user/notification/notification_subscriptions.tmpl
+++ b/templates/user/notification/notification_subscriptions.tmpl
@@ -13,7 +13,7 @@
 			{{if eq .Status 1}}
 				<div class="ui stackable grid">
 					<div class="six wide column">
-						<div class="small-pill-buttons ui compact tiny menu">
+						<div class="small-menu-items ui compact tiny menu">
 							<a class="{{if eq .State "all"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
 								{{.locale.Tr "all"}}
 							</a>
diff --git a/tests/integration/issue_test.go b/tests/integration/issue_test.go
index eccf3c3795..7ea7fefb64 100644
--- a/tests/integration/issue_test.go
+++ b/tests/integration/issue_test.go
@@ -143,7 +143,7 @@ func testNewIssue(t *testing.T, session *TestSession, user, repo, title, content
 
 	htmlDoc = NewHTMLParser(t, resp.Body)
 	val := htmlDoc.doc.Find("#issue-title").Text()
-	assert.Equal(t, title, val)
+	assert.Contains(t, val, title)
 	val = htmlDoc.doc.Find(".comment .render-content p").First().Text()
 	assert.Equal(t, content, val)
 
diff --git a/web_src/css/base.css b/web_src/css/base.css
index d854f9badd..591c09377c 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2559,18 +2559,18 @@ a.ui.basic.label:hover {
 
 .notification_count {
   position: absolute;
-  left: 5px;
-  top: -8px;
+  left: 7px;
+  top: -9px;
   min-width: 1.5em;
   text-align: center;
   background: var(--color-primary);
   border: 2px solid var(--color-header-bar);
   color: var(--color-header-bar);
-  padding: 2px;
+  padding: 2.75px;
   border-radius: 1em;
-  font-size: 10px;
+  font-size: 11px;
   font-weight: 700;
-  line-height: 0.7;
+  line-height: .67em;
 }
 
 table th[data-sortt-asc]:hover,
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index d724dc400a..6709b127db 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -591,85 +591,81 @@
   display: inline-block;
 }
 
-.repository.view.issue .title {
-  padding-bottom: 0 !important;
-}
-
-.repository.view.issue .title .issue-title {
-  margin-bottom: 0.5rem;
+.issue-title-header {
+  width: 100%;
+  padding-bottom: 4px;
+  margin-bottom: 1rem;
 }
 
-.repository.view.issue .title .issue-title.edit-active {
+.issue-title-meta {
   display: flex;
   align-items: center;
 }
 
-.repository.view.issue .title .issue-title.edit-active h1 {
+.repository.view.issue .issue-title-buttons,
+.repository.view.issue .edit-buttons {
   display: flex;
-  width: 100%;
 }
 
 @media (max-width: 767px) {
-  .repository.view.issue .title .issue-title.edit-active {
+  .repository.view.issue .issue-title {
     flex-direction: column;
   }
-  .repository.view.issue .title .issue-title.edit-active h1 {
-    margin-right: 0;
-    margin-bottom: 1rem;
-    padding-right: 0;
-  }
-  .repository.view.issue .title .issue-title.edit-active h1 .ui.input input {
-    width: calc(100% - 2rem);
-  }
-  .repository.view.issue .title .issue-title.edit-active .edit-buttons {
-    padding-bottom: 1rem;
-    width: 100%;
-  }
-  .repository.view.issue .title .issue-title.edit-active .edit-buttons .button {
-    width: 100%;
-    margin-right: 0.5rem;
-  }
-  .repository.view.issue .title .issue-title.edit-active .edit-buttons .button:last-child {
-    margin-right: 0;
+  .repository.view.issue .edit-buttons {
+    margin-top: .5rem;
   }
 }
 
-.repository.view.issue .title .issue-title h1 {
+.repository.view.issue .issue-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.repository.view.issue .issue-title h1 {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  width: 100%;
   font-weight: 300;
-  font-size: 2.3rem;
+  font-size: 32px;
+  line-height: 40px;
   margin: 0;
-  padding-right: 0.5rem;
+  padding-right: 0.25rem;
+  min-height: 41px; /* avoid layout shift on edit */
 }
 
-.repository.view.issue .title .issue-title h1 .ui.input {
+.repository.view.issue .issue-title h1 .ui.input {
   font-size: 0.5em;
-  width: 100%;
 }
 
-.repository.view.issue .title .issue-title h1 .ui.input input {
+.repository.view.issue .issue-title h1 .ui.input input {
   font-size: 1.5em;
-  padding: 6px 1rem;
+  padding: 2px .5rem;
 }
 
-.repository.view.issue .title .issue-title .edit-button {
-  float: right;
-  padding-left: 1rem;
+.repository.view.issue .issue-title .index {
+  color: var(--color-text-light-2);
 }
 
-.repository.view.issue .title .issue-title .edit-buttons {
-  display: flex;
+.repository.view.issue .issue-title .label {
+  margin-right: 10px;
 }
 
-.repository.view.issue .title .issue-title .index {
-  color: var(--color-text-light-2);
+.repository.view.issue .issue-title .edit-zone {
+  margin-top: 10px;
 }
 
-.repository.view.issue .title .issue-title .label {
-  margin-right: 10px;
+.issue-state-label {
+  display: flex !important;
+  align-items: center !important;
+  font-size: 14px !important;
+  padding: 7px 10px !important;
+  border-radius: 6px !important;
 }
 
-.repository.view.issue .title .issue-title .edit-zone {
-  margin-top: 10px;
+.issue-state-label .svg {
+  margin-right: 4px;
 }
 
 .repository.view.issue .pull-desc code {
@@ -1193,13 +1189,15 @@
 
 .repository .milestone.list {
   list-style: none;
-  padding-top: 15px;
 }
 
 .repository .milestone.list > .item {
   padding-top: 10px;
   padding-bottom: 10px;
-  border-bottom: 1px dashed var(--color-secondary);
+}
+
+.repository .milestone.list > .item + .item {
+  border-top: 1px solid var(--color-secondary);
 }
 
 .repository .milestone.list > .item progress {
diff --git a/web_src/css/repository/issue-list.css b/web_src/css/repository/issue-list.css
index 2c2d3572e0..dde3e7f19f 100644
--- a/web_src/css/repository/issue-list.css
+++ b/web_src/css/repository/issue-list.css
@@ -3,6 +3,7 @@
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 1rem;
+  margin-top: 1rem;
 }
 
 .issue-list-toolbar-left {
diff --git a/web_src/css/repository/list-header.css b/web_src/css/repository/list-header.css
index 4130383f89..24aa36dd89 100644
--- a/web_src/css/repository/list-header.css
+++ b/web_src/css/repository/list-header.css
@@ -26,11 +26,11 @@
   flex: 1;
 }
 
-.small-pill-buttons {
+.small-menu-items {
   min-height: 35.4px !important; /* match .small.button in height */
 }
 
-.small-pill-buttons .item {
+.small-menu-items .item {
   padding-top: 6px !important;
   padding-bottom: 6px !important;
 }
diff --git a/web_src/css/repository/release-tag.css b/web_src/css/repository/release-tag.css
index 6922ce5179..700ac46c21 100644
--- a/web_src/css/repository/release-tag.css
+++ b/web_src/css/repository/release-tag.css
@@ -1,7 +1,6 @@
 .repository.releases #release-list {
-  border-top: 1px solid var(--color-secondary);
-  margin-top: 20px;
-  padding-top: 15px;
+  margin-top: 12px;
+  padding-top: 12px;
   padding-left: 0;
 }
 
@@ -23,29 +22,13 @@
 }
 
 .repository.releases #release-list > li .meta {
+  margin-top: 4px;
   text-align: right;
   position: relative;
 }
 
-.repository.releases #release-list > li .meta .label {
-  margin-right: 0;
-}
-
-.repository.releases #release-list > li .meta .commit {
-  display: block;
-  margin-top: 10px;
-}
-
-.repository.releases #release-list > li .meta .choose {
-  margin-top: 15px;
-}
-
-.repository.releases #release-list > li .meta .choose .button {
-  margin-right: 0;
-}
-
 .repository.releases #release-list > li .detail {
-  border-left: 2px solid var(--color-secondary);
+  border-left: 1px solid var(--color-secondary);
 }
 
 .repository.releases #release-list > li .detail .author img {
@@ -92,7 +75,7 @@
   z-index: 9;
   position: absolute;
   display: block;
-  left: -6px;
+  left: -5.5px;
   top: 40px;
   border-radius: 100%;
   border: 2.5px solid var(--color-body);
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index 5e47f8ee3e..42cde81802 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -29,33 +29,33 @@
   --color-primary-alpha-70: #87ab63b3;
   --color-primary-alpha-80: #87ab63cc;
   --color-primary-alpha-90: #87ab63e1;
-  --color-secondary: #454a57;
-  --color-secondary-dark-1: #505665;
-  --color-secondary-dark-2: #5b6273;
-  --color-secondary-dark-3: #71798e;
-  --color-secondary-dark-4: #7f8699;
-  --color-secondary-dark-5: #8c93a4;
-  --color-secondary-dark-6: #9aa0af;
-  --color-secondary-dark-7: #a8adba;
-  --color-secondary-dark-8: #b6bac5;
-  --color-secondary-dark-9: #c4c7d0;
-  --color-secondary-dark-10: #d2d4db;
-  --color-secondary-dark-11: #dfe1e6;
-  --color-secondary-dark-12: #edeef1;
+  --color-secondary: #525767;
+  --color-secondary-dark-1: #5c6374;
+  --color-secondary-dark-2: #666e81;
+  --color-secondary-dark-3: #7c8497;
+  --color-secondary-dark-4: #8990a1;
+  --color-secondary-dark-5: #959cab;
+  --color-secondary-dark-6: #a2a8b5;
+  --color-secondary-dark-7: #afb4c0;
+  --color-secondary-dark-8: #bcc0ca;
+  --color-secondary-dark-9: #c9cbd4;
+  --color-secondary-dark-10: #d6d7de;
+  --color-secondary-dark-11: #e2e3e8;
+  --color-secondary-dark-12: #eeeff2;
   --color-secondary-dark-13: #fbfbfc;
-  --color-secondary-light-1: #373b46;
-  --color-secondary-light-2: #292c34;
-  --color-secondary-light-3: #1c1e23;
-  --color-secondary-light-4: #0e0f11;
-  --color-secondary-alpha-10: #454a5719;
-  --color-secondary-alpha-20: #454a5733;
-  --color-secondary-alpha-30: #454a574b;
-  --color-secondary-alpha-40: #454a5766;
-  --color-secondary-alpha-50: #454a5780;
-  --color-secondary-alpha-60: #454a5799;
-  --color-secondary-alpha-70: #454a57b3;
-  --color-secondary-alpha-80: #454a57cc;
-  --color-secondary-alpha-90: #454a57e1;
+  --color-secondary-light-1: #454a57;
+  --color-secondary-light-2: #383c47;
+  --color-secondary-light-3: #2c2f37;
+  --color-secondary-light-4: #1f2226;
+  --color-secondary-alpha-10: #52576719;
+  --color-secondary-alpha-20: #52576733;
+  --color-secondary-alpha-30: #5257674b;
+  --color-secondary-alpha-40: #52576766;
+  --color-secondary-alpha-50: #52576780;
+  --color-secondary-alpha-60: #52576799;
+  --color-secondary-alpha-70: #525767b3;
+  --color-secondary-alpha-80: #525767cc;
+  --color-secondary-alpha-90: #525767e1;
   /* colors */
   --color-red: #cc4848;
   --color-orange: #cc580c;
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index d8451e8399..38a375aa85 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ui floating filter dropdown custom">
-    <button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
+    <button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df gt-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
       <span class="text gt-df gt-ac gt-mr-2">
         <template v-if="release">{{ textReleaseCompare }}</template>
         <template v-else>
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 63fae3a37c..265eceab59 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -572,8 +572,10 @@ export function initRepoIssueTitleEdit() {
     toggleElem($('#pull-desc'));
     toggleElem($('#pull-desc-edit'));
     toggleElem($('.in-edit'));
+    toggleElem($('.new-issue-button'));
     $('#issue-title-wrapper').toggleClass('edit-active');
-    $editInput.trigger('focus');
+    $editInput[0].focus();
+    $editInput[0].select();
     return false;
   };
 
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 851a9b855e..c3bd0ccb76 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -469,11 +469,7 @@ export function initRepository() {
     return;
   }
 
-  // File list and commits
-  if ($('.repository.file.list').length > 0 || $('.branch-dropdown').length > 0 ||
-    $('.repository.commits').length > 0 || $('.repository.release').length > 0) {
-    initRepoBranchTagSelector('.js-branch-tag-selector');
-  }
+  initRepoBranchTagSelector('.js-branch-tag-selector');
 
   // Options
   if ($('.repository.settings.options').length > 0) {