Review fixes and enhancements (#24526)

- Fix regression with icons wrapping from
https://github.com/go-gitea/gitea/pull/24459
- Fix box misalignment on small screen
- Fix avatar misalignment on review comment
- Fix incorrect underline hover effect on review icons
- Move status icon to left side in review box
- Enhance review icon colors, add helper function for it
- Add missing inline avatars in review comments
- Tweak icon sizes because some octicons have inconsistent sizing

### Before
<img width="655" alt="Screenshot 2023-05-04 at 20 50 28"
src="https://user-images.githubusercontent.com/115237/236301230-92325507-6e03-47ac-bfb4-c9ddde310571.png">
<img width="260" alt="Screenshot 2023-05-04 at 20 50 42"
src="https://user-images.githubusercontent.com/115237/236301236-0dfa50e7-b8fc-4179-ae68-d872bc90f1f3.png">

### After
<img width="498" alt="Screenshot 2023-05-04 at 20 55 08"
src="https://user-images.githubusercontent.com/115237/236301810-23862c2c-c0a9-43a4-a3eb-ee611c14a7f4.png">
<img width="219" alt="Screenshot 2023-05-04 at 20 55 16"
src="https://user-images.githubusercontent.com/115237/236301817-d0de02ea-6ab5-43e1-9183-6b3848b72995.png">

---------

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

1 files changed, 19 insertions, 32 deletions

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 29d8d9d47c..907ee19857 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -1,5 +1,5 @@
 {{if or .PullReviewers .OriginalReviews}}
-	<div class="comment box">
+	<div class="comment box timeline-item gt-pt-3 gt-pb-0">
 		<div class="content">
 			<div class="ui segment">
 				<h4>{{$.locale.Tr "repo.issues.review.reviewers"}}</h4>
@@ -8,9 +8,12 @@
 					<div class="ui divider"></div>
 					<div class="review-item">
 						<div class="review-item-left">
+							<span class="gt-mr-3 text {{.Review.HTMLTypeColorName}}">
+								{{svg (printf "octicon-%s" .Review.Type.Icon)}}
+							</span>
 							{{if .User}}
 								<a href="{{.User.HomeLink}}">
-									{{avatar $.Context .User}}
+									{{avatar $.Context .User 20}}
 								</a>
 							{{end}}
 							<span class="gt-ml-2">
@@ -34,13 +37,13 @@
 						</div>
 						<div class="review-item-right">
 							{{if .Review.Stale}}
-								<span class="ui type-icon text grey" data-tooltip-content="{{$.locale.Tr "repo.issues.is_stale"}}">
+								<span class="ui text grey" data-tooltip-content="{{$.locale.Tr "repo.issues.is_stale"}}">
 									{{svg "octicon-hourglass" 16 "icon"}}
 								</span>
 							{{end}}
 							{{if (and $.Permission.IsAdmin (or (eq .Review.Type 1) (eq .Review.Type 3)) (not $.Issue.IsClosed))}}
-								<a href="#" class="ui muted icon dismiss-review-btn" data-review-id="dismiss-review-{{.Review.ID}}" data-tooltip-content="{{$.locale.Tr "repo.issues.dismiss_review"}}">
-									{{svg "octicon-x" 16}}
+								<a href="#" class="ui muted icon gt-df gt-ac dismiss-review-btn" data-review-id="dismiss-review-{{.Review.ID}}" data-tooltip-content="{{$.locale.Tr "repo.issues.dismiss_review"}}">
+									{{svg "octicon-x" 20}}
 								</a>
 								<div class="ui small modal" id="dismiss-review-modal">
 									<div class="header">
@@ -65,19 +68,9 @@
 									</div>
 								</div>
 							{{end}}
-							<span class="type-icon text {{if eq .Review.Type 1}}green
-								{{- else if eq .Review.Type 2}}grey
-								{{- else if eq .Review.Type 3}}red
-								{{- else if eq .Review.Type 4}}yellow
-								{{else}}grey{{end}}">
-
-								{{if .CanChange}}
-									<a href="#" class="ui icon re-request-review {{if .Checked}}checked{{end}}" data-issue-id="{{$.Issue.ID}}" data-tooltip-content="{{if .Checked}} {{$.locale.Tr "repo.issues.remove_request_review"}} {{else}} {{$.locale.Tr "repo.issues.re_request_review"}} {{end}}"  data-id="{{.ItemID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
-										{{if .Checked}} {{svg "octicon-trash"}} {{else}} {{svg "octicon-sync"}} {{end}}
-									</a>
-								{{end}}
-								{{svg (printf "octicon-%s" .Review.Type.Icon)}}
-							</span>
+							{{if .CanChange}}
+								<a href="#" class="ui icon muted gt-df gt-ac re-request-review{{if .Checked}} checked{{end}}" data-issue-id="{{$.Issue.ID}}" data-tooltip-content="{{if .Checked}}{{$.locale.Tr "repo.issues.remove_request_review"}}{{else}}{{$.locale.Tr "repo.issues.re_request_review"}}{{end}}" data-id="{{.ItemID}}" data-update-url="{{$.RepoLink}}/issues/request_review">{{if .Checked}}{{svg "octicon-trash"}}{{else}}{{svg "octicon-sync"}}{{end}}</a>
+							{{end}}
 						</div>
 					</div>
 				{{end}}
@@ -86,22 +79,16 @@
 					<div class="ui divider"></div>
 					<div class="review-item">
 						<div class="review-item-left">
+							<span class="gt-mr-3 text {{.Review.HTMLTypeColorName}}">
+								{{svg (printf "octicon-%s" .Type.Icon)}}
+							</span>
 							<a href="{{$.Repository.OriginalURL}}" data-tooltip-content="{{$.locale.Tr "repo.migrated_from_fake" ($.Repository.GetOriginalURLHostname|Escape) | Safe}}">
-								<span class="text black ">
+								<span class="text black">
 									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 									{{.OriginalAuthor}}
 								</span>
 							</a>
 						</div>
-						<div class="review-item-right">
-							<span class="type-icon text {{if eq .Type 1}}green
-								{{- else if eq .Type 2}}grey
-								{{- else if eq .Type 3}}red
-								{{- else if eq .Type 4}}yellow
-								{{else}}grey{{end}}">
-								{{svg (printf "octicon-%s" .Type.Icon)}}
-							</span>
-						</div>
 					</div>
 				{{end}}
 			</div>
@@ -204,7 +191,7 @@
 				</div>
 			{{else if .Issue.PullRequest.IsAncestor}}
 				<div class="item">
-					<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
+					<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
 					{{$.locale.Tr "repo.pulls.is_ancestor"}}
 				</div>
 			{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
@@ -230,7 +217,7 @@
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
+						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 						{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
 						<ul>
 							{{range .ChangedProtectedFiles}}
@@ -294,7 +281,7 @@
 					<div class="ui divider"></div>
 
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
+						<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
 						{{$.locale.Tr "repo.pulls.is_empty"}}
 					</div>
 				{{end}}
@@ -430,7 +417,7 @@
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
 					<div class="item text red">
-						<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
+						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 						{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
 						<ul>
 							{{range .ChangedProtectedFiles}}