ui: Show update branch item in merge box when it's necessary (#11761)

* ui: Show update branch item in merge box when it's necessary

As title, should show it without care about whether
this pr can be merged.

fix #10959

Signed-off-by: a1012112796 <1012112796@qq.com>

* fix ui

* Fix ui, thanks to @silverwind.

Co-authored-by: silverwind <me@silverwind.io>

* fix lint

* Update templates/repo/issue/view_content/pull.tmpl

Co-authored-by: silverwind <me@silverwind.io>

* Apply review suggestion

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

templates/repo/issue/view_content/pull.tmpl

@@ -75,6 +75,7 @@
 	{{- else}}red{{end}}">{{svg "octicon-git-merge" 32}}</a>
 	<div class="content">
 		{{template "repo/pulls/status" .}}
+		{{$canAutoMerge := false}}
 		<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
 			{{if .Issue.PullRequest.HasMerged}}
 				<div class="item text purple">
@@ -188,6 +189,30 @@
 							{{$.i18n.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason) }}
 						</div>
 					{{end}}
+				{{end}}
+				
+				{{$canAutoMerge = true}}
+				{{if (gt .Issue.PullRequest.CommitsBehind 0)}}
+					<div class="ui divider"></div>
+					<div class="item item-section text grey">
+						<div class="item-section-left">
+							<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
+							{{$.i18n.Tr "repo.pulls.outdated_with_base_branch"}}
+						</div>
+						<div class="item-section-right">
+							{{if .UpdateAllowed}}
+								<form action="{{.Link}}/update" method="post" class="ui update-branch-form">
+									{{.CsrfTokenHtml}}
+									<button class="ui compact button" data-do="update">
+										<span class="ui text">{{$.i18n.Tr "repo.pulls.update_branch"}}</span>
+									</button>
+								</form>
+							{{end}}
+						</div>
+					</div>
+				{{end}}
+
+				{{if and (or $.IsRepoAdmin (not $notAllOverridableChecksOk)) (or (not .RequireSigned) .WillSign)}}
 					{{if .AllowMerge}}
 						{{$prUnit := .Repository.MustGetUnit $.UnitTypePullRequests}}
 						{{$approvers := .Issue.PullRequest.GetApprovers}}
@@ -300,6 +325,7 @@
 								</div>
 							</div>
 						{{else}}
+							<div class="ui divider"></div>
 							<div class="item text red">
 								{{svg "octicon-x" 16}}
 								{{$.i18n.Tr "repo.pulls.no_merge_desc"}}
@@ -310,32 +336,13 @@
 							</div>
 						{{end}}
 					{{else}}
+						<div class="ui divider"></div>
 						<div class="item text grey">
 							{{svg "octicon-info" 16}}
 							{{$.i18n.Tr "repo.pulls.no_merge_access"}}
 						</div>
 					{{end}}
 				{{end}}
-				{{if gt .Issue.PullRequest.CommitsBehind 0}}
-				<div class="ui very compact branch-update grid">
-						<div class="row">
-						<div class="item text gray eleven wide left floated column">
-							<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
-							{{$.i18n.Tr "repo.pulls.outdated_with_base_branch"}}
-						</div>
-						{{if .UpdateAllowed}}
-							<div class="item text five wide right floated column">
-								<form action="{{.Link}}/update" method="post">
-									{{.CsrfTokenHtml}}
-									<button class="ui button" data-do="update">
-										<span class="item text">{{$.i18n.Tr "repo.pulls.update_branch"}}</span>
-									</button>
-								</form>
-							</div>
-						{{end}}
-					</div>
-				</div>
-				{{end}}
 			{{else}}
 				{{/* Merge conflict without specific file. Suggest manual merge, only if all reviews and status checks OK. */}}
 				{{if .IsBlockedByApprovals}}
@@ -374,6 +381,21 @@
 					</div>
 				{{end}}
 			{{end}}
+
+			{{if and (gt .Issue.PullRequest.CommitsBehind 0) (not  .Issue.IsClosed) (not .Issue.PullRequest.IsChecking) (not .IsPullFilesConflicted) (not .IsPullRequestBroken) (not $canAutoMerge)}}
+				<div class="item text grey">
+					<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
+					{{$.i18n.Tr "repo.pulls.outdated_with_base_branch"}}
+					{{if .UpdateAllowed}}
+						<form action="{{.Link}}/update" method="post" class="ui floating right">
+							{{.CsrfTokenHtml}}
+							<button class="ui compact button" data-do="update">
+								<span class="ui text">{{$.i18n.Tr "repo.pulls.update_branch"}}</span>
+							</button>
+						</form>
+					{{end}}
+				</div>
+			{{end}}
 		</div>
 	</div>
 </div>

web_src/less/_repository.less

@@ -995,8 +995,17 @@
                     > .merge-section {
                         background-color: #f7f7f7;
 
-                        .item + .item {
+                        .item {
-                            padding-top: .5rem;
+                            padding: .25rem 0;
+                        }
+
+                        .item-section {
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            padding: 0;
+                            margin-top: -.25rem;
+                            margin-bottom: -.25rem;
                         }
 
                         .divider {