Change review buttons to icons to make space for text (#20934)

templates/repo/diff/box.tmpl

@@ -13,14 +13,14 @@
 	<h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
 {{else}}
 	<div>
-		<div class="diff-detail-box diff-box sticky df sb ac">
+		<div class="diff-detail-box diff-box sticky df sb ac fw">
 			<div class="diff-detail-stats df ac">
 				{{svg "octicon-diff" 16 "mr-2"}}{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
 			</div>
 			<div class="diff-detail-actions df ac">
 				{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
 					<progress id="viewed-files-summary" class="mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
-					<label for="viewed-files-summary" id="viewed-files-summary-label" class="mr-2" data-text-changed-template="{{.i18n.Tr "repo.pulls.viewed_files_label"}}">
+					<label for="viewed-files-summary" id="viewed-files-summary-label" class="mr-3" data-text-changed-template="{{.i18n.Tr "repo.pulls.viewed_files_label"}}">
 						{{.i18n.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
 					</label>
 				{{end}}

templates/repo/diff/new_review.tmpl

@@ -1,5 +1,5 @@
 <div class="ui top right pointing dropdown custom" id="review-box">
-	<div class="ui tiny green button btn-review">
+	<div class="ui tiny green button btn-review ml-2 mr-0">
 		{{.i18n.Tr "repo.diff.review"}}
 		<span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span>
 		{{svg "octicon-triangle-down" 14 "dropdown icon"}}

templates/repo/diff/options_dropdown.tmpl

@@ -1,6 +1,5 @@
-<div class="ui dropdown tiny basic button">
-	{{.i18n.Tr "repo.diff.options_button"}}
-	{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+<div class="ui dropdown tiny basic button icon-button tooltip" data-content="{{.i18n.Tr "repo.diff.options_button"}}">
+	{{svg "octicon-kebab-horizontal"}}
 	<div class="menu">
 		<a class="item tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
 		{{if .Issue.Index}}

templates/repo/diff/whitespace_dropdown.tmpl

@@ -1,5 +1,5 @@
-<div class="ui dropdown tiny basic button">
-	{{.i18n.Tr "repo.diff.whitespace_button"}}
+<div class="ui dropdown tiny basic button icon-button tooltip" data-content="{{.i18n.Tr "repo.diff.whitespace_button"}}">
+	{{svg "gitea-whitespace"}}
 	{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	<div class="menu">
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all">
@@ -20,4 +20,4 @@
 		</a>
 	</div>
 </div>
-<a class="ui tiny basic toggle button" href="?style={{if .IsSplitStyle}}unified{{else}}split{{end}}&whitespace={{$.WhitespaceBehavior}}">{{ if .IsSplitStyle }}{{.i18n.Tr "repo.diff.show_unified_view"}}{{else}}{{.i18n.Tr "repo.diff.show_split_view"}}{{end}}</a>
+<a class="ui tiny basic toggle button icon-button tooltip" href="?style={{if .IsSplitStyle}}unified{{else}}split{{end}}&whitespace={{$.WhitespaceBehavior}}" data-content="{{if .IsSplitStyle}}{{.i18n.Tr "repo.diff.show_unified_view"}}{{else}}{{.i18n.Tr "repo.diff.show_split_view"}}{{end}}">{{if .IsSplitStyle}}{{svg "gitea-join"}}{{else}}{{svg "gitea-split"}}{{end}}</a>

web_src/less/_base.less

@@ -299,6 +299,12 @@ a.commit-statuses-trigger {
   &:extend(.unselectable);
 }
 
+/* try to match button with no icons in height */
+.icon-button {
+  padding-top: 7.42px !important;
+  padding-bottom: 7.42px !important;
+}
+
 .ui.breadcrumb a:hover {
   text-decoration: underline !important;
 }