mirror of
				https://gitee.com/gitea/gitea
				synced 2025-11-04 08:30:25 +08:00 
			
		
		
		
	Add wrapper to author to avoid long name ui problem (#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.
This commit is contained in:
		@@ -8,14 +8,14 @@
 | 
				
			|||||||
					{{if .LatestCommitUser}}
 | 
										{{if .LatestCommitUser}}
 | 
				
			||||||
						{{avatar $.Context .LatestCommitUser 24}}
 | 
											{{avatar $.Context .LatestCommitUser 24}}
 | 
				
			||||||
						{{if .LatestCommitUser.FullName}}
 | 
											{{if .LatestCommitUser.FullName}}
 | 
				
			||||||
							<a class="muted" href="{{.LatestCommitUser.HomeLink}}"><strong>{{.LatestCommitUser.FullName}}</strong></a>
 | 
												<a class="muted author-wrapper" title="{{.LatestCommitUser.FullName}}" href="{{.LatestCommitUser.HomeLink}}"><strong>{{.LatestCommitUser.FullName}}</strong></a>
 | 
				
			||||||
						{{else}}
 | 
											{{else}}
 | 
				
			||||||
							<a class="muted" href="{{.LatestCommitUser.HomeLink}}"><strong>{{if .LatestCommit.Author}}{{.LatestCommit.Author.Name}}{{else}}{{.LatestCommitUser.Name}}{{end}}</strong></a>
 | 
												<a class="muted author-wrapper" title="{{if .LatestCommit.Author}}{{.LatestCommit.Author.Name}}{{else}}{{.LatestCommitUser.Name}}{{end}}" href="{{.LatestCommitUser.HomeLink}}"><strong>{{if .LatestCommit.Author}}{{.LatestCommit.Author.Name}}{{else}}{{.LatestCommitUser.Name}}{{end}}</strong></a>
 | 
				
			||||||
						{{end}}
 | 
											{{end}}
 | 
				
			||||||
					{{else}}
 | 
										{{else}}
 | 
				
			||||||
						{{if .LatestCommit.Author}}
 | 
											{{if .LatestCommit.Author}}
 | 
				
			||||||
							{{avatarByEmail $.Context .LatestCommit.Author.Email .LatestCommit.Author.Name 24}}
 | 
												{{avatarByEmail $.Context .LatestCommit.Author.Email .LatestCommit.Author.Name 24}}
 | 
				
			||||||
							<strong>{{.LatestCommit.Author.Name}}</strong>
 | 
												<span class="author-wrapper" title="{{.LatestCommit.Author.Name}}"><strong>{{.LatestCommit.Author.Name}}</strong></span>
 | 
				
			||||||
						{{end}}
 | 
											{{end}}
 | 
				
			||||||
					{{end}}
 | 
										{{end}}
 | 
				
			||||||
					<a rel="nofollow" class="ui sha label {{if .LatestCommit.Signature}} isSigned {{if .LatestCommitVerification.Verified}} isVerified{{if eq .LatestCommitVerification.TrustStatus "trusted"}}{{else if eq .LatestCommitVerification.TrustStatus "untrusted"}}Untrusted{{else}}Unmatched{{end}}{{else if .LatestCommitVerification.Warning}} isWarning{{end}}{{end}}" href="{{.RepoLink}}/commit/{{PathEscape .LatestCommit.ID.String}}">
 | 
										<a rel="nofollow" class="ui sha label {{if .LatestCommit.Signature}} isSigned {{if .LatestCommitVerification.Verified}} isVerified{{if eq .LatestCommitVerification.TrustStatus "trusted"}}{{else if eq .LatestCommitVerification.TrustStatus "untrusted"}}Untrusted{{else}}Unmatched{{end}}{{else if .LatestCommitVerification.Warning}} isWarning{{end}}{{end}}" href="{{.RepoLink}}/commit/{{PathEscape .LatestCommit.ID.String}}">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -237,6 +237,8 @@
 | 
				
			|||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    #repo-files-table {
 | 
					    #repo-files-table {
 | 
				
			||||||
 | 
					      table-layout: fixed;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      thead {
 | 
					      thead {
 | 
				
			||||||
        th {
 | 
					        th {
 | 
				
			||||||
          padding-top: 8px;
 | 
					          padding-top: 8px;
 | 
				
			||||||
@@ -2885,7 +2887,8 @@ tbody.commit-list {
 | 
				
			|||||||
  vertical-align: baseline;
 | 
					  vertical-align: baseline;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.message-wrapper {
 | 
					.message-wrapper,
 | 
				
			||||||
 | 
					.author-wrapper {
 | 
				
			||||||
  overflow: hidden;
 | 
					  overflow: hidden;
 | 
				
			||||||
  text-overflow: ellipsis;
 | 
					  text-overflow: ellipsis;
 | 
				
			||||||
  max-width: calc(100% - 50px);
 | 
					  max-width: calc(100% - 50px);
 | 
				
			||||||
@@ -2893,6 +2896,10 @@ tbody.commit-list {
 | 
				
			|||||||
  vertical-align: middle;
 | 
					  vertical-align: middle;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.author-wrapper {
 | 
				
			||||||
 | 
					  max-width: 180px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
// in the commit list, messages can wrap so we can use inline
 | 
					// in the commit list, messages can wrap so we can use inline
 | 
				
			||||||
.commit-list .message-wrapper {
 | 
					.commit-list .message-wrapper {
 | 
				
			||||||
  display: inline;
 | 
					  display: inline;
 | 
				
			||||||
@@ -2912,6 +2919,10 @@ tbody.commit-list {
 | 
				
			|||||||
    display: block;
 | 
					    display: block;
 | 
				
			||||||
    max-width: calc(100vw - 70px);
 | 
					    max-width: calc(100vw - 70px);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .author-wrapper {
 | 
				
			||||||
 | 
					    max-width: 80px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@media @mediaMd {
 | 
					@media @mediaMd {
 | 
				
			||||||
@@ -2920,7 +2931,7 @@ tbody.commit-list {
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  th .message-wrapper {
 | 
					  th .message-wrapper {
 | 
				
			||||||
    max-width: 280px;
 | 
					    max-width: 120px;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -2930,7 +2941,7 @@ tbody.commit-list {
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  th .message-wrapper {
 | 
					  th .message-wrapper {
 | 
				
			||||||
    max-width: 490px;
 | 
					    max-width: 350px;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -2940,7 +2951,7 @@ tbody.commit-list {
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  th .message-wrapper {
 | 
					  th .message-wrapper {
 | 
				
			||||||
    max-width: 680px;
 | 
					    max-width: 525px;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user