Fix multiple overflowing issues in commits table

It was possible that the commit message would overflow hiding the expand commits button and commit status. This change ensures that the correct elements overflow without hiding anything else. This change also reverts using flex in the commits list because it was causing issues in Blink based browsers. Signed-off-by: Gary Kim <gary@garykim.dev>
go-gitea · Aug 9, 2019 · bcda068 · bcda068
1 parent e43d1c5
commit bcda068
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/public/css/index.css b/public/css/index.css
@@ -632,7 +632,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{display:flex;padding-top:0;padding-bottom: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,.repository #repo-files-table .sha.label{border:1px solid #bbb}
 .repository #commits-table td.sha .sha.label .detail.icon,.repository #repo-files-table .sha.label .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}
@@ -828,8 +828,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}

diff --git a/public/less/_repository.less b/public/less/_repository.less
@@ -1266,9 +1266,7 @@
         }
 
         td.message {
-            display: flex;
-            padding-top: 0;
-            padding-bottom: 0;
+            text-overflow: unset;
         }
 
         &.ui.basic.striped.table tbody tr:nth-child(2n) {
@@ -2310,12 +2308,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;
 }

diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl
@@ -70,14 +70,19 @@
 							</a>
 						</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="message-wrapper-parent">
+                                <span class="message-wrapper">
+                                    <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}}
 							</span>
-							{{template "repo/commit_status" .Status}}
+
 						</td>
 						<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>
 					</tr>