Better align items using flex within review request box (#11879)

* Better align items using flex within review request box

* use justify-content

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

templates/repo/issue/view_content/pull.tmpl

@@ -7,6 +7,30 @@
 					{{ $createdStr:= TimeSinceUnix .UpdatedUnix $.Lang }}
 					<div class="ui divider"></div>
 					<div class="review-item">
+						<div class="review-item-left">
+							<a class="ui avatar image" href="{{.Reviewer.HomeLink}}">
+								<img src="{{.Reviewer.RelAvatarLink}}">
+							</a>
+							<span class="text grey"><a href="{{.Reviewer.HomeLink}}">{{.Reviewer.Name}}</a>
+								{{if eq .Type 1}}
+									{{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}}
+								{{else if eq .Type 2}}
+									{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
+								{{else if eq .Type 3}}
+									{{$.i18n.Tr "repo.issues.review.reject" $createdStr | Safe}}
+								{{else if eq .Type 4}}
+									{{$.i18n.Tr "repo.issues.review.wait" $createdStr | Safe}}
+								{{else}}
+									{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
+								{{end}}
+							</span>
+						</div>
+						<div class="review-item-right">
+							{{if .Stale}}
+							<span class="type-icon text grey">
+								<i class="octicon icon fa-hourglass-end"></i>
+							</span>
+							{{end}}
 							<span class="type-icon text {{if eq .Type 1}}green
 								{{- else if eq .Type 2}}grey
 								{{- else if eq .Type 3}}red
@@ -31,27 +55,7 @@
 								{{end}}
 								{{svg (printf "octicon-%s" .Type.Icon) 16}}
 							</span>
-						{{if .Stale}}
-						<span class="type-icon text grey">
-							<i class="octicon icon fa-hourglass-end"></i>
-						</span>
-						{{end}}
-						<a class="ui avatar image" href="{{.Reviewer.HomeLink}}">
-							<img src="{{.Reviewer.RelAvatarLink}}">
-						</a>
-						<span class="text grey"><a href="{{.Reviewer.HomeLink}}">{{.Reviewer.Name}}</a>
-							{{if eq .Type 1}}
-								{{$.i18n.Tr "repo.issues.review.approve" $createdStr | Safe}}
-							{{else if eq .Type 2}}
-								{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
-							{{else if eq .Type 3}}
-								{{$.i18n.Tr "repo.issues.review.reject" $createdStr | Safe}}
-							{{else if eq .Type 4}}
-								{{$.i18n.Tr "repo.issues.review.wait" $createdStr | Safe}}
-							{{else}}
-								{{$.i18n.Tr "repo.issues.review.comment" $createdStr | Safe}}
-							{{end}}
-						</span>
+						</div>
 					</div>
 				{{end}}
 			</div>

web_src/less/_repository.less

@@ -657,14 +657,18 @@
             }
 
             .review-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .review-item-left,
+                .review-item-right {
+                    display: flex;
+                    align-items: center;
+                }
 
                 .avatar,
                 .type-icon {
-                    float: none;
-                    display: inline-block;
-                    text-align: center;
-                    vertical-align: middle;
-
                     .svg {
                         width: 23px;
                         height: 23px;
@@ -676,8 +680,12 @@
                 }
 
                 .type-icon {
-                    float: right;
+                    align-self: flex-start;
                     margin-right: 1em;
+
+                    i {
+                        line-height: 1.8em;
+                    }
                 }
 
                 .divider {