Diff box fixes (#15214)

- Fix misaligned "Show Outdated" buttons via flexbox
- Add hover effect to "Show Outdated" buttons
- Remove overreaching margin from selector .diff-file-box and handle
  cases individually.

Fixes: https://github.com/go-gitea/gitea/issues/15097

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

3 files changed, 45 insertions, 37 deletions

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 368fc2c444..2dcad2ba9d 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -43,7 +43,7 @@
 		</ol>
 		{{range $i, $file := .Diff.Files}}
 			{{if $file.IsIncomplete}}
-				<div class="diff-file-box diff-box file-content">
+				<div class="diff-file-box diff-box file-content mt-3">
 					<h4 class="ui top attached normal header rounded">
 						<a role="button" class="fold-file muted mr-2">
 							{{svg "octicon-chevron-down" 18}}
@@ -70,7 +70,7 @@
 					</h4>
 				</div>
 			{{else}}
-				<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}">
+				<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} mt-3" id="diff-{{.Index}}">
 					<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb">
 						<div class="df ac">
 							{{$isImage := false}}
@@ -145,7 +145,7 @@
 		{{end}}
 
 		{{if .Diff.IsIncomplete}}
-			<div class="diff-file-box diff-box file-content">
+			<div class="diff-file-box diff-box file-content mt-3">
 				<h4 class="ui top attached normal header">
 					{{$.i18n.Tr "repo.diff.too_many_files"}}
 				</h4>
diff --git a/templates/repo/diff/conversation.tmpl b/templates/repo/diff/conversation.tmpl
index 4dd7de0fc1..7b447d01bf 100644
--- a/templates/repo/diff/conversation.tmpl
+++ b/templates/repo/diff/conversation.tmpl
@@ -3,16 +3,20 @@
 {{$isNotPending := (not (eq (index .comments 0).Review.Type 0))}}
 <div class="conversation-holder" data-path="{{(index .comments 0).TreePath}}" data-side="{{if lt (index .comments 0).Line 0}}left{{else}}right{{end}}" data-idx="{{(index .comments 0).UnsignedLine}}">
 	{{if $resolved}}
-		<div class="ui attached header resolved-placeholder">
-			<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
-			<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated">
-				{{svg "octicon-unfold"}}
-				{{$.i18n.Tr "repo.issues.review.show_resolved"}}
-			</button>
-			<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated">
-				{{svg "octicon-fold"}}
-				{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
-			</button>
+		<div class="ui attached header resolved-placeholder df ac sb">
+			<div class="ui grey text">
+				<b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}
+			</div>
+			<div>
+				<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated df ac">
+					{{svg "octicon-unfold" 16 "mr-3"}}
+					{{$.i18n.Tr "repo.issues.review.show_resolved"}}
+				</button>
+				<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated df ac">
+					{{svg "octicon-fold" 16 "mr-3"}}
+					{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
+				</button>
+			</div>
 		</div>
 	{{end}}
 	<div id="code-comments-{{(index  .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}hide{{end}}">
@@ -32,4 +36,4 @@
 			</button>
 		{{end}}
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 0cae8bdf95..f84981c1c6 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -459,35 +459,39 @@
 				{{ range $filename, $lines := .Review.CodeComments}}
 					{{range $line, $comms := $lines}}
 							<div class="ui segments">
-								<div class="ui segment py-3">
+								<div class="ui segment py-3 df ac sb">
 									{{$invalid := (index $comms 0).Invalidated}}
 									{{$resolved := (index $comms 0).IsResolved}}
 									{{$resolveDoer := (index $comms 0).ResolveDoer}}
 									{{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}}
-								{{if or $invalid $resolved}}
-									<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}hide {{end}}ui compact right labeled button show-outdated">
-										{{svg "octicon-unfold"}}
-										{{if $resolved}}
-											{{$.i18n.Tr "repo.issues.review.show_resolved"}}
-										{{else}}
-											{{$.i18n.Tr "repo.issues.review.show_outdated"}}
+									<div class="df ac">
+										<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment ml-3">{{$filename}}</a>
+										{{if $invalid }}
+											<span class="ui label basic small ml-3">
+												{{$.i18n.Tr "repo.issues.review.outdated"}}
+											</span>
 										{{end}}
-									</button>
-									<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}hide {{end}}ui compact right labeled button hide-outdated">
-										{{svg "octicon-fold"}}
-										{{if $resolved}}
-											{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
-										{{else}}
-											{{$.i18n.Tr "repo.issues.review.hide_outdated"}}
+									</div>
+									<div>
+										{{if or $invalid $resolved}}
+											<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}hide {{end}}ui compact right labeled button show-outdated df ac">
+												{{svg "octicon-unfold" 16 "mr-3"}}
+												{{if $resolved}}
+													{{$.i18n.Tr "repo.issues.review.show_resolved"}}
+												{{else}}
+													{{$.i18n.Tr "repo.issues.review.show_outdated"}}
+												{{end}}
+											</button>
+											<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}hide {{end}}ui compact right labeled button hide-outdated df ac">
+												{{svg "octicon-fold" 16 "mr-3"}}
+												{{if $resolved}}
+													{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
+												{{else}}
+													{{$.i18n.Tr "repo.issues.review.hide_outdated"}}
+												{{end}}
+											</button>
 										{{end}}
-									</button>
-								{{end}}
-								<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment">{{$filename}}</a>
-								{{if $invalid }}
-									<span class="ui label basic small yellow">
-										{{$.i18n.Tr "repo.issues.review.outdated"}}
-									</span>
-								{{end}}
+									</div>
 								</div>
 								{{$diff := (CommentMustAsDiff (index $comms 0))}}
 								{{if $diff}}