From ddf61373f691a584844f141bc4728948fe142dc3 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 24 Feb 2023 04:45:18 +0200 Subject: [PATCH] Add wrapper to author to avoid long name ui problem (#23030) (#23098) Backport #23030 This PR is a possible solution for issue #22866. Main change is to add a `author-wrapper` class around author name, like the wrapper added to message. The `max-width` is set to 200px on PC, and 100px on mobile device for now. Which will work like below: 2023-02-21 11 57 53 2023-02-21 11 58 43 And `title` is added to the wrapper like it did in message wrapper. So the full author name will show on hover. Co-authored-by: HesterG Co-authored-by: Lunny Xiao --- templates/repo/view_list.tmpl | 6 +++--- web_src/less/_repository.less | 19 +++++++++++++++---- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl index 6fcf60dae..9540c872c 100644 --- a/templates/repo/view_list.tmpl +++ b/templates/repo/view_list.tmpl @@ -8,14 +8,14 @@ {{if .LatestCommitUser}} {{avatar $.Context .LatestCommitUser 24}} {{if .LatestCommitUser.FullName}} - {{.LatestCommitUser.FullName}} + {{.LatestCommitUser.FullName}} {{else}} - {{if .LatestCommit.Author}}{{.LatestCommit.Author.Name}}{{else}}{{.LatestCommitUser.Name}}{{end}} + {{if .LatestCommit.Author}}{{.LatestCommit.Author.Name}}{{else}}{{.LatestCommitUser.Name}}{{end}} {{end}} {{else}} {{if .LatestCommit.Author}} {{avatarByEmail $.Context .LatestCommit.Author.Email .LatestCommit.Author.Name 24}} - {{.LatestCommit.Author.Name}} + {{.LatestCommit.Author.Name}} {{end}} {{end}} diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 627a5f6c2..83e8e1f33 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -237,6 +237,8 @@ } #repo-files-table { + table-layout: fixed; + thead { th { padding-top: 8px; @@ -2885,7 +2887,8 @@ tbody.commit-list { vertical-align: baseline; } -.message-wrapper { +.message-wrapper, +.author-wrapper { overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 50px); @@ -2893,6 +2896,10 @@ tbody.commit-list { vertical-align: middle; } +.author-wrapper { + max-width: 180px; +} + // in the commit list, messages can wrap so we can use inline .commit-list .message-wrapper { display: inline; @@ -2912,6 +2919,10 @@ tbody.commit-list { display: block; max-width: calc(100vw - 70px); } + + .author-wrapper { + max-width: 80px; + } } @media @mediaMd { @@ -2920,7 +2931,7 @@ tbody.commit-list { } th .message-wrapper { - max-width: 280px; + max-width: 120px; } } @@ -2930,7 +2941,7 @@ tbody.commit-list { } th .message-wrapper { - max-width: 490px; + max-width: 350px; } } @@ -2940,7 +2951,7 @@ tbody.commit-list { } th .message-wrapper { - max-width: 680px; + max-width: 525px; } }