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:

<img width="1183" alt="2023-02-21 11 57 53"
src="https://user-images.githubusercontent.com/17645053/220244146-3d47c512-33b6-4ed8-938e-de0a8bc26ffb.png">

<img width="417" alt="2023-02-21 11 58 43"
src="https://user-images.githubusercontent.com/17645053/220244154-1ea0476b-9d1c-473a-9917-d3216860f9a9.png">

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 <hestergong@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

docs/content/doc/developers/guidelines-refactoring.en-us.md

@@ -6,11 +6,11 @@ weight: 20
 toc: false
 draft: false
 menu:
-sidebar:
+  sidebar:
-parent: "developers"
+    parent: "developers"
-name: "Guidelines for Refactoring"
+    name: "Guidelines for Refactoring"
-weight: 20
+    weight: 20
-identifier: "guidelines-refactoring"
+    identifier: "guidelines-refactoring"
 ---
 
 # Guidelines for Refactoring

routers/web/repo/patch.go

@@ -25,6 +25,8 @@ const (
 func NewDiffPatch(ctx *context.Context) {
 	canCommit := renderCommitRights(ctx)
 
+	ctx.Data["PageIsPatch"] = true
+
 	ctx.Data["TreePath"] = ""
 
 	ctx.Data["commit_summary"] = ""
@@ -51,6 +53,7 @@ func NewDiffPatchPost(ctx *context.Context) {
 	if form.CommitChoice == frmCommitChoiceNewBranch {
 		branchName = form.NewBranchName
 	}
+	ctx.Data["PageIsPatch"] = true
 	ctx.Data["TreePath"] = ""
 	ctx.Data["BranchLink"] = ctx.Repo.RepoLink + "/src/" + ctx.Repo.BranchNameSubURL()
 	ctx.Data["FileContent"] = form.Content

templates/base/head_navbar.tmpl

@@ -18,9 +18,9 @@
 				</span>
 			</a>
 			{{end}}
-			<div class="ui icon button mobile-only" id="navbar-expand-toggle">
+			<button class="ui icon button mobile-only" id="navbar-expand-toggle">
 				{{svg "octicon-three-bars"}}
-			</div>
+			</button>
 		</div>
 	</div>
 

templates/repo/editor/commit_form.tmpl

@@ -9,7 +9,7 @@
 			{{.locale.Tr "repo.editor.commit_changes"}}
 		{{- end}}</h3>
 		<div class="field">
-			<input name="commit_summary" placeholder="{{if .PageIsDelete}}{{.locale.Tr "repo.editor.delete" .TreePath}}{{else if .PageIsUpload}}{{.locale.Tr "repo.editor.upload_files_to_dir" .TreePath}}{{else if .IsNewFile}}{{.locale.Tr "repo.editor.add_tmpl"}}{{else}}{{.locale.Tr "repo.editor.update" .TreePath}}{{end}}" value="{{.commit_summary}}" autofocus>
+			<input name="commit_summary" placeholder="{{if .PageIsDelete}}{{.locale.Tr "repo.editor.delete" .TreePath}}{{else if .PageIsUpload}}{{.locale.Tr "repo.editor.upload_files_to_dir" .TreePath}}{{else if .IsNewFile}}{{.locale.Tr "repo.editor.add_tmpl"}}{{else if .PageIsPatch}}{{.locale.Tr "repo.editor.patch"}}{{else}}{{.locale.Tr "repo.editor.update" .TreePath}}{{end}}" value="{{.commit_summary}}" autofocus>
 		</div>
 		<div class="field">
 			<textarea name="commit_message" placeholder="{{.locale.Tr "repo.editor.commit_message_desc"}}" rows="5">{{.commit_message}}</textarea>

templates/repo/issue/view_content.tmpl

@@ -27,7 +27,7 @@
 				</a>
 			{{end}}
 				<div class="content comment-container">
-					<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
+					<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
 						<div class="comment-header-left gt-df gt-ac">
 							{{if .Issue.OriginalAuthor}}
 								<span class="text black gt-bold">
@@ -69,7 +69,7 @@
 							{{end}}
 						</div>
 					</div>
-					<div class="ui attached segment comment-body">
+					<div class="ui attached segment comment-body" role="article">
 						<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission $.IsIssuePoster}}data-can-edit="true"{{end}}>
 							{{if .Issue.RenderedContent}}
 								{{.Issue.RenderedContent|Str2html}}
@@ -85,7 +85,7 @@
 					</div>
 					{{$reactions := .Issue.Reactions.GroupByType}}
 					{{if $reactions}}
-						<div class="ui attached segment reactions">
+						<div class="ui attached segment reactions" role="note">
 							{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
 						</div>
 					{{end}}

templates/repo/issue/view_content/comments.tmpl

@@ -22,7 +22,7 @@
 				</a>
 			{{end}}
 				<div class="content comment-container">
-					<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
+					<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
 						<div class="comment-header-left gt-df gt-ac">
 							{{if .OriginalAuthor}}
 								<span class="text black gt-bold gt-mr-2">
@@ -69,7 +69,7 @@
 							{{end}}
 						</div>
 					</div>
-					<div class="ui attached segment comment-body">
+					<div class="ui attached segment comment-body" role="article">
 						<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
 							{{if .RenderedContent}}
 								{{.RenderedContent|Str2html}}
@@ -85,7 +85,7 @@
 					</div>
 					{{$reactions := .Reactions.GroupByType}}
 					{{if $reactions}}
-						<div class="ui attached segment reactions">
+						<div class="ui attached segment reactions" role="note">
 							{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
 						</div>
 					{{end}}

templates/repo/view_list.tmpl

@@ -8,14 +8,14 @@
 					{{if .LatestCommitUser}}
 						{{avatar $.Context .LatestCommitUser 24}}
 						{{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}}
-							<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}}
 					{{else}}
 						{{if .LatestCommit.Author}}
 							{{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}}
 					<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}}">

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;
   }
 }