Use flex to align SVG and text (#25163)

The code can be as simple as:

```html
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
<div><button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button></div>
```


![image](https://github.com/go-gitea/gitea/assets/2114189/1d3c10f1-0bc7-4c26-b236-bad537d5c465)

---------

Co-authored-by: Giteabot <teabot@gitea.io>

1 files changed, 48 insertions, 50 deletions

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index e2ec691ee3..fd395c0eb6 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -22,13 +22,13 @@
 	<div class="content">
 		{{template "repo/pulls/status" .}}
 		{{$showGeneralMergeForm := false}}
-		<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
+		<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}} flex-items-block">
 			{{if .Issue.PullRequest.HasMerged}}
 				{{if .IsPullBranchDeletable}}
 					<div class="item item-section text gt-f1">
 						<div class="item-section-left">
 							<h3 class="gt-mb-3">
-									{{$.locale.Tr "repo.pulls.merged_success"}}
+								{{$.locale.Tr "repo.pulls.merged_success"}}
 							</h3>
 							<div class="merge-section-info">
 								{{$.locale.Tr "repo.pulls.merged_info_text" (printf "<code>%s</code>" (.HeadTarget | Escape)) | Str2html}}
@@ -58,93 +58,91 @@
 					{{end}}
 				</div>
 			{{else if .IsPullFilesConflicted}}
-				<div class="item text">
+				<div class="item">
 					{{svg "octicon-x"}}
 					{{$.locale.Tr "repo.pulls.files_conflicted"}}
-					<ul>
-						{{range .ConflictedFiles}}
-							<li>{{.}}</li>
-						{{end}}
-					</ul>
 				</div>
+				<ul>
+					{{range .ConflictedFiles}}
+					<li>{{.}}</li>
+					{{end}}
+				</ul>
 			{{else if .IsPullRequestBroken}}
 				<div class="item">
-					<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+					{{svg "octicon-x"}}
 					{{$.locale.Tr "repo.pulls.data_broken"}}
 				</div>
 			{{else if .IsPullWorkInProgress}}
-				<div class="item toggle-wip gt-df gt-ac gt-sb" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
-					<div>
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+				<div class="item toggle-wip" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
+					<div class="item-section-left flex-text-inline gt-f1">
+						{{svg "octicon-x"}}
 						{{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}}
 					</div>
-					<div>
-						{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
-							<button class="ui compact button">
-								{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
-							</button>
-						{{end}}
-					</div>
+					{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
+						<button class="ui compact button">
+							{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
+						</button>
+					{{end}}
 				</div>
 				{{template "repo/issue/view_content/update_branch_by_merge" $}}
 			{{else if .Issue.PullRequest.IsChecking}}
 				<div class="item">
-					<i class="icon icon-octicon">{{svg "octicon-sync"}}</i>
+					{{svg "octicon-sync"}}
 					{{$.locale.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.IsAncestor}}
 				<div class="item">
-					<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
+					{{svg "octicon-alert"}}
 					{{$.locale.Tr "repo.pulls.is_ancestor"}}
 				</div>
 			{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
 				{{if .IsBlockedByApprovals}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
-					{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
+						{{svg "octicon-x"}}
+						{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
 					</div>
 				{{else if .IsBlockedByRejection}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 					{{$.locale.Tr "repo.pulls.blocked_by_rejection"}}
 					</div>
 				{{else if .IsBlockedByOfficialReviewRequests}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 					{{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
 					</div>
 				{{else if .IsBlockedByOutdatedBranch}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
-					{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
+						{{svg "octicon-x"}}
+						{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
-						<ul>
-							{{range .ChangedProtectedFiles}}
-								<li>{{.}}</li>
-							{{end}}
-						</ul>
 					</div>
+					<ul>
+						{{range .ChangedProtectedFiles}}
+						<li>{{.}}</li>
+						{{end}}
+					</ul>
 				{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.Tr "repo.pulls.required_status_check_failed"}}
 					</div>
 				{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.Tr "repo.pulls.required_status_check_missing"}}
 					</div>
 				{{else if and .AllowMerge .RequireSigned (not .WillSign)}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.Tr "repo.pulls.require_signed_wont_sign"}}
 					</div>
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
+						{{svg "octicon-unlock"}}
 						{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
 					</div>
 				{{end}}
@@ -158,23 +156,23 @@
 				{{if $canMergeNow}}
 					{{if $notAllOverridableChecksOk}}
 						<div class="item">
-							<i class="icon icon-octicon">{{svg "octicon-dot-fill"}}</i>
+							{{svg "octicon-dot-fill"}}
 							{{$.locale.Tr "repo.pulls.required_status_check_administrator"}}
 						</div>
 					{{else}}
 						<div class="item">
-							<i class="icon icon-octicon">{{svg "octicon-check"}}</i>
+							{{svg "octicon-check"}}
 							{{$.locale.Tr "repo.pulls.can_auto_merge_desc"}}
 						</div>
 					{{end}}
 					{{if .WillSign}}
 						<div class="item">
-							<i class="icon icon-octicon">{{svg "octicon-lock" 16 "text green"}}</i>
+							{{svg "octicon-lock" 16 "text green"}}
 							{{$.locale.Tr "repo.signing.will_sign" .SigningKey}}
 						</div>
 					{{else if .IsSigned}}
 						<div class="item">
-							<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
+							{{svg "octicon-unlock"}}
 							{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
 						</div>
 					{{end}}
@@ -184,7 +182,7 @@
 					<div class="ui divider"></div>
 
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
+						{{svg "octicon-alert"}}
 						{{$.locale.Tr "repo.pulls.is_empty"}}
 					</div>
 				{{end}}
@@ -315,19 +313,19 @@
 					</div>
 				{{else if .IsBlockedByOutdatedBranch}}
 					<div class="item text red">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
-					{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
+						{{svg "octicon-x"}}
+						{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
 					<div class="item text red">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
-						<ul>
-							{{range .ChangedProtectedFiles}}
-								<li>{{.}}</li>
-							{{end}}
-						</ul>
 					</div>
+					<ul>
+						{{range .ChangedProtectedFiles}}
+						<li>{{.}}</li>
+						{{end}}
+					</ul>
 				{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
 					<div class="item text red">
 						{{svg "octicon-x"}}