Diff page enhancements (#25398) (#25437)

Backport #25398 by @silverwind

Two small tweaks:

1. Vertically center arrow here when editing a PR:

<img width="405" alt="Screenshot 2023-06-20 at 19 48 49"
src="https://github.com/go-gitea/gitea/assets/115237/1d63764d-9fd9-467e-8a8e-9258c06475eb">

2. Use 2-row layout on diff viewed status and show it again on mobile:

<img width="142" alt="Screenshot 2023-06-20 at 19 51 21"
src="https://github.com/go-gitea/gitea/assets/115237/3046e782-163c-4f87-910c-a22066de8f1b">

Mobile view:

<img width="370" alt="Screenshot 2023-06-20 at 19 44 40"
src="https://github.com/go-gitea/gitea/assets/115237/9cf56347-7323-4d05-99a5-17ad215ee44d">

Co-authored-by: silverwind <me@silverwind.io>

templates/repo/diff/box.tmpl

@@ -34,10 +34,12 @@
 			</div>
 			<div class="diff-detail-actions gt-df gt-ac gt-gap-2 gt-fw">
 				{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
-					<progress id="viewed-files-summary" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
+					<div class="gt-df gt-ac gt-fc gt-whitespace-nowrap gt-mr-2">
-					<label for="viewed-files-summary" id="viewed-files-summary-label" class="gt-f1 gt-whitespace-nowrap not-mobile" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}">
+						<label for="viewed-files-summary" id="viewed-files-summary-label" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}">
 							{{.locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
 						</label>
+						<progress id="viewed-files-summary" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
+					</div>
 				{{end}}
 				{{template "repo/diff/whitespace_dropdown" .}}
 				{{template "repo/diff/options_dropdown" .}}

templates/repo/issue/view_title.tmpl

@@ -70,9 +70,9 @@
 							{{$.locale.Tr "repo.pulls.title_desc" .NumCommits $headHref $baseHref | Safe}}
 						</span>
 					{{end}}
-					<span id="pull-desc-edit" class="gt-hidden">
+					<span id="pull-desc-edit" class="gt-hidden flex-text-block">
 						<div class="ui floating filter dropdown">
-							<div class="ui basic small button">
+							<div class="ui basic small button gt-mr-0">
 								<span class="text">{{.locale.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
 							</div>
 						</div>

web_src/css/repo.css

@@ -1559,7 +1559,6 @@
 .repository .diff-detail-box {
   padding: 7px 0;
   background: var(--color-body);
-  line-height: 30px;
 }
 
 @media (max-width: 991.98px) {

web_src/css/review.css

@@ -287,6 +287,6 @@
 }
 
 #viewed-files-summary {
-  width: 72px;
+  width: 100%;
-  height: 10px;
+  height: 8px;
 }