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

[a1012112796]

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

example view:

fix #10959

[silverwind]

Button should be vertically centered with the text and not stick to the bottom of the box. Maybe try compact or tiny classes. I'd flexbox-center it but it'd require a few wrapper elements.

[CirnoT]

After fixing styling please ensure it is not broken on other views (when merge button is present, etc)

[a1012112796]

@silverwind @CirnoT done. Thanks for your help.

[zeripath]

Unfortunately the merge button appears to still have floated out of line from the out of date comment.

[silverwind]

Maybe split it into it's own "section":

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 110b80ea2..fcdaf9372 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -192,19 +192,24 @@
 				{{end}}

 				{{$canAutoMerge = true}}
 				{{if (gt .Issue.PullRequest.CommitsBehind 0)}}
-					<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 small button" data-do="update">
-									<span class="ui text">{{$.i18n.Tr "repo.pulls.update_branch"}}</span>
-								</button>
-							</form>
-						{{end}}
+					<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 small 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)}}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 756ad6d6a..c0bb56e36 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -994,10 +994,19 @@

                     > .merge-section {
                         background-color: #f7f7f7;

-                        .item + .item {
-                            padding-top: .5rem;
+                        .item {
+                            padding: .25rem 0;
+                        }
+
+                        .item-section {
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            padding: 0;
+                            margin-top: -.25rem;
+                            margin-bottom: -.25rem;
                         }

                         .divider {
                             margin-left: -1rem;

[silverwind]

Maybe we want to apply the style with the divider between each item for all of them, I think it looks cleaner that way, but can be done in another PR.

[silverwind]

Maybe we want to apply the style with the divider between each item for all of them

BTW, I tried that and came to the conclusion that it's not possible to render all dividers correctly in all cases because of the complex template logic involved so it'd need to be done via CSS .item + .item, but certainly stuff for another PR.

[techknowlogick]

ping LG-TM