diff --git a/public/css/index.css b/public/css/index.css
index 133af2690..30a5f8e60 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -2063,9 +2063,14 @@ footer .ui.language .menu {
 .repository .diff-detail-box span.status.rename {
   background-color: #dad8ff;
 }
+.repository .diff-box {
+  display: flex;
+  align-items: center;
+}
 .repository .diff-box .count {
   margin-right: 12px;
   font-size: 13px;
+  flex: 0 0 auto;
 }
 .repository .diff-box .count .bar {
   background-color: #bd2c00;
@@ -2080,7 +2085,14 @@ footer .ui.language .menu {
   height: 12px;
 }
 .repository .diff-box .file {
+  flex: 0 1 100%;
   color: #888;
+  word-break: break-all;
+}
+.repository .diff-box .button {
+  margin: -5px 0 -5px 12px;
+  padding: 8px 10px;
+  flex: 0 0 auto;
 }
 .repository .diff-file-box .header {
   background-color: #f7f7f7;
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 170eb4feb..8490228b4 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -888,9 +888,13 @@
 		}
 	}
 	.diff-box {
+		display: flex;
+		align-items: center;
+
 		.count {
 			margin-right: 12px;
 			font-size: 13px;
+			flex: 0 0 auto;
 
 			.bar {
 				background-color: #bd2c00;
@@ -906,7 +910,15 @@
 			}
 		}
 		.file {
+			flex: 0 1 100%;
 			color: #888;
+			word-break: break-all;
+		}
+
+		.button {
+			margin: -5px 0 -5px 12px;
+			padding: 8px 10px;
+			flex: 0 0 auto;
 		}
 	}
 	.diff-file-box {
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 40675d75b..5495b110b 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -54,7 +54,7 @@
 		{{else}}
 			<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}">
 				<h4 class="ui top attached normal header">
-					<div class="diff-counter count ui left">
+					<div class="diff-counter count">
 						{{if $file.IsBin}}
 							{{$.i18n.Tr "repo.diff.bin"}}
 						{{else if not $file.IsRenamed}}
@@ -68,13 +68,11 @@
 					</div>
 					<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
 					{{if not $file.IsSubmodule}}
-						<div class="ui right">
-							{{if $file.IsDeleted}}
-								<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-							{{else}}
-								<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-							{{end}}
-						</div>
+						{{if $file.IsDeleted}}
+							<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+						{{else}}
+							<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+						{{end}}
 					{{end}}
 				</h4>
 				<div class="ui attached table segment">