From 2ed21e7e09e48e847eff75ef9b665767aadbd30e Mon Sep 17 00:00:00 2001 From: Gary Kim Date: Fri, 9 Aug 2019 12:57:29 +0000 Subject: [PATCH] Prevent Commit Status and Message From Overflowing On Branch Page (#7800) * Prevent Commit Status From Overflowing On Branch Page It is possible for the commit ci status on the branches page for a repository to become an ellipsis due to overflowing. This commit will fix that issue by using flex. Signed-off-by: Gary Kim * 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 * Remove unnecessary html element and fix indentation issues --- public/css/index.css | 5 +++-- public/less/_repository.less | 8 ++++++-- templates/repo/commits_table.tmpl | 18 ++++++++++-------- 3 files changed, 19 insertions(+), 12 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index 28faf4835..b19b85ad3 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -632,6 +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{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} @@ -825,8 +826,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 index 9b0b7fdce..eb183c162 100644 --- a/public/less/_repository.less +++ b/public/less/_repository.less @@ -1156,6 +1156,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; } @@ -2172,12 +2176,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 index ebeb87b93..7ea854103 100644 --- a/templates/repo/commits_table.tmpl +++ b/templates/repo/commits_table.tmpl @@ -46,11 +46,11 @@ {{if .User}} - {{if .User.FullName}} + {{if .User.FullName}}   {{.User.FullName}} - {{else}} + {{else}}   {{.Author.Name}} - {{end}} + {{end}} {{else}}   {{.Author.Name}} {{end}} @@ -71,13 +71,15 @@ - {{.Summary}} - {{if IsMultilineCommitMessage .Message}} - - - {{end}} + {{.Summary}} + {{if IsMultilineCommitMessage .Message}} + + {{end}} {{template "repo/commit_status" .Status}} + {{if IsMultilineCommitMessage .Message}} + + {{end}} {{TimeSince .Author.When $.Lang}}