Prevent Commit Status and Message From Overflowing On Branch Page (#7800) (#7808)

Signed-off-by: Gary Kim <gary@garykim.dev>

public/css/index.css

@@ -623,6 +623,7 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .repository #commits-table thead .sha{width:140px}
 .repository #commits-table thead .shatd{text-align:center}
 .repository #commits-table td.sha .sha.label{margin:0}
+.repository #commits-table td.message{text-overflow:unset}
 .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.02)!important}
 .repository #commits-table td.sha .sha.label.isSigned,.repository #repo-files-table .sha.label.isSigned{border:1px solid #bbb}
 .repository #commits-table td.sha .sha.label.isSigned .detail.icon,.repository #repo-files-table .sha.label.isSigned .detail.icon{background:#fafafa;margin:-6px -10px -4px 0;padding:5px 3px 5px 6px;border-left:1px solid #bbb;border-top-left-radius:0;border-bottom-left-radius:0}
@@ -817,8 +818,8 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .stats-table .table-cell{display:table-cell}
 .stats-table .table-cell.tiny{height:.5em}
 tbody.commit-list{vertical-align:baseline}
-.commit-list .message-wrapper{overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);display:inline-block;vertical-align:middle}
-.commit-list .message-wrapper .commit-status-link{display:inline-block;vertical-align:middle}
+.commit-list .message-wrapper{overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 50px);display:inline-block;vertical-align:middle}
+.commit-list .commit-status-link{display:inline-block;vertical-align:middle}
 .commit-body{white-space:pre-wrap}
 .git-notes.top{text-align:left}
 .git-notes .commit-body{margin:0}

public/less/_repository.less

@@ -1265,6 +1265,10 @@
             margin: 0;
         }
 
+        td.message {
+            text-overflow: unset;
+        }
+
         &.ui.basic.striped.table tbody tr:nth-child(2n) {
             background-color: rgba(0, 0, 0, 0.02) !important;
         }
@@ -2302,12 +2306,12 @@ tbody.commit-list {
 .commit-list .message-wrapper {
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: calc(100% - 24px);
+    max-width: calc(100% - 50px);
     display: inline-block;
     vertical-align: middle;
 }
 
-.commit-list .message-wrapper .commit-status-link {
+.commit-list .commit-status-link {
     display: inline-block;
     vertical-align: middle;
 }

templates/repo/commits_table.tmpl

@@ -46,11 +46,11 @@
 					<tr>
 						<td class="author">
 							{{if .User}}
-							  {{if .User.FullName}}
+								{{if .User.FullName}}
 								<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
-							  {{else}}
+								{{else}}
 								<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
-							  {{end}}
+								{{end}}
 							{{else}}
 								<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
 							{{end}}
@@ -71,13 +71,15 @@
 						</td>
 						<td class="message">
 							<span class="message-wrapper">
-								<span class="commit-summary has-emoji{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary}}</span>
-								{{if IsMultilineCommitMessage .Message}}
-								<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
-								<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
-								{{end}}
+									<span class="commit-summary has-emoji{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary}}</span>
 							</span>
+							{{if IsMultilineCommitMessage .Message}}
+							<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+							{{end}}
 							{{template "repo/commit_status" .Status}}
+							{{if IsMultilineCommitMessage .Message}}
+							<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
+							{{end}}
 						</td>
 						<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>
 					</tr>