From 5c991c1043a6f3ae3616841202bebf153effc6be Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Thu, 8 Jun 2023 14:22:52 +0200
Subject: [PATCH] [UI] Fix misalligned icons

- On the pull request page, two icons were misaligned vertically with
their text part.
- This patch adds the simple flexbox trick with `align-items: center` to
vertically center the children elements and adds `gt-ml-2` to the text,
to add space between icon and text that would otherwise be removed
because of `display: flex`.
---
 .../repo/issue/view_content/update_branch_by_merge.tmpl     | 6 +++---
 web_src/js/components/PullRequestMergeForm.vue              | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/templates/repo/issue/view_content/update_branch_by_merge.tmpl b/templates/repo/issue/view_content/update_branch_by_merge.tmpl
index 84df244d8d..3734f9a2f0 100644
--- a/templates/repo/issue/view_content/update_branch_by_merge.tmpl
+++ b/templates/repo/issue/view_content/update_branch_by_merge.tmpl
@@ -1,9 +1,9 @@
 {{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
 	<div class="ui divider"></div>
 	<div class="item item-section">
-		<div class="item-section-left">
-			<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
-			{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}
+		<div class="item-section-left gt-df gt-ac">
+			<i class="icon icon-octicon gt-df gt-ac">{{svg "octicon-alert"}}</i>
+			<span class="gt-ml-2">{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}</span>
 		</div>
 		<div class="item-section-right">
 			{{if and $.UpdateAllowed $.UpdateByRebaseAllowed}}
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index d6ddbef817..c2bd57f001 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -63,9 +63,9 @@
     <div v-if="!showActionForm" class="gt-df">
       <!-- the merge button -->
       <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'green' : 'red']" @click="toggleActionForm(true)">
-        <button class="ui button">
+        <button class="ui button gt-df gt-ac">
           <svg-icon name="octicon-git-merge"/>
-          <span class="button-text">
+          <span class="button-text gt-ml-2">
             {{ mergeStyleDetail.textDoMerge }}
             <template v-if="autoMergeWhenSucceed">
               {{ mergeForm.textAutoMergeButtonWhenSucceed }}