Change review buttons to icons to make space for text

The layout on the review code view was broken depending on length of the
text before. Change all three buttons to icons with tooltip to make more
space for these long texts.

Fixes: #20922

Author: silverwind

public/img/svg/gitea-join.svg

@@ -13,7 +13,7 @@
 	<h4>{{.locale.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"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
 			</div>

public/img/svg/gitea-split.svg

@@ -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 mr-0">
 		{{.locale.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/box.tmpl

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

templates/repo/diff/new_review.tmpl

@@ -1,5 +1,5 @@
-<div class="ui dropdown tiny basic button">
-	{{.locale.Tr "repo.diff.whitespace_button"}}
+<div class="ui dropdown tiny basic button icon-button tooltip" data-content="{{.locale.Tr "repo.diff.whitespace_button"}}">
+	{{svg "octicon-gear"}}
 	{{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 }}{{.locale.Tr "repo.diff.show_unified_view"}}{{else}}{{.locale.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}}{{.locale.Tr "repo.diff.show_unified_view"}}{{else}}{{.locale.Tr "repo.diff.show_split_view"}}{{end}}">{{if .IsSplitStyle}}{{svg "gitea-join"}}{{else}}{{svg "gitea-split"}}{{end}}</a>

templates/repo/diff/options_dropdown.tmpl

@@ -304,6 +304,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;
 }