Fix issues on commit list page

Author: CL-Jeremy

templates/repo/branch/list.tmpl

@@ -9,7 +9,7 @@
 		</h4>
 
 		<div class="ui attached table segment">
-			<table class="ui very basic striped fixed table single line unstackable table">
+			<table class="ui very basic striped fixed single line unstackable table">
 				<tbody>
 					<tr>
 						<td class="six wide">

templates/repo/commits_list.tmpl

@@ -18,9 +18,9 @@
 								{{if .User.FullName}}
 									{{$userName = .User.FullName}}
 								{{end}}
-								{{avatar .User 28 "mr-2"}}<a href="{{AppSubUrl}}/{{.User.Name}}">{{$userName}}</a>
+								{{avatar .User 28 "mr-3"}}<a href="{{AppSubUrl}}/{{.User.Name}}">{{$userName}}</a>
 							{{else}}
-								{{avatarByEmail .Author.Email .Author.Name 28 "mr-2"}}
+								{{avatarByEmail .Author.Email .Author.Name 28 "mr-3"}}
 								{{$userName}}
 							{{end}}
 						</td>
@@ -65,7 +65,6 @@
 								{{ $commitLink:= printf "%s/%s/%s/commit/%s" AppSubUrl $.Username $.Reponame .ID }}
 								<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject .Message $.RepoLink $commitLink $.Repository.ComposeMetas}}</span>
 							{{end}}
-							</span>
 							{{if IsMultilineCommitMessage .Message}}
 							<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
 							{{end}}
@@ -75,6 +74,7 @@
 							{{if IsMultilineCommitMessage .Message}}
 							<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
 							{{end}}
+							</span>
 						</td>
 						<td class="text right age">{{TimeSince .Author.When $.Lang}}</td>
 					</tr>

web_src/less/_repository.less

@@ -2714,10 +2714,27 @@ tbody.commit-list {
 }
 
 .message-wrapper {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100% - 21px);
-  display: block;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  .commit-summary {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    flex: 1;
+    max-width: max-content;
+    min-width: .5em;
+  }
+
+  .commit-button {
+    margin-right: 0;
+    margin-left: .25rem;
+  }
+
+  .commit-statuses-trigger {
+    flex: 100%;
+  }
 }
 
 @media (max-width: 480px) {