fix toggle commit body button ui when latest commit message is long (#32997) (#33034)

backport #32997 and #33002

Author: wxiaoguang

package-lock.json

@@ -86,7 +86,7 @@
     "eslint": "8.57.0",
     "eslint-import-resolver-typescript": "3.7.0",
     "eslint-plugin-array-func": "4.0.0",
-    "eslint-plugin-github": "5.1.3",
+    "eslint-plugin-github": "5.0.2",
     "eslint-plugin-import-x": "4.5.0",
     "eslint-plugin-no-jquery": "3.1.0",
     "eslint-plugin-no-use-extend-native": "0.5.0",

package.json

@@ -1,10 +1,10 @@
 {{if .Statuses}}
 	{{if and (eq (len .Statuses) 1) .Status.TargetURL}}
-		<a class="tw-align-middle {{.AdditionalClasses}} tw-no-underline" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
+		<a class="flex-text-inline tw-no-underline {{.AdditionalClasses}}" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
 			{{template "repo/commit_status" .Status}}
 		</a>
 	{{else}}
-		<span class="tw-align-middle {{.AdditionalClasses}}" data-tippy="commit-statuses" tabindex="0">
+		<span class="flex-text-inline {{.AdditionalClasses}}" data-tippy="commit-statuses" tabindex="0">
 			{{template "repo/commit_status" .Status}}
 		</span>
 	{{end}}

templates/repo/commit_statuses.tmpl

@@ -2,15 +2,15 @@
 	…
 {{else}}
 	{{if .LatestCommitUser}}
-		{{ctx.AvatarUtils.Avatar .LatestCommitUser 24 "tw-mr-1"}}
+		{{ctx.AvatarUtils.Avatar .LatestCommitUser 24}}
 		{{if and .LatestCommitUser.FullName DefaultShowFullName}}
 			<a class="muted author-wrapper" title="{{.LatestCommitUser.FullName}}" href="{{.LatestCommitUser.HomeLink}}"><strong>{{.LatestCommitUser.FullName}}</strong></a>
 		{{else}}
 			<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}}
-			{{ctx.AvatarUtils.AvatarByEmail .LatestCommit.Author.Email .LatestCommit.Author.Name 24 "tw-mr-1"}}
+			{{ctx.AvatarUtils.AvatarByEmail .LatestCommit.Author.Email .LatestCommit.Author.Name 24}}
 			<span class="author-wrapper" title="{{.LatestCommit.Author.Name}}"><strong>{{.LatestCommit.Author.Name}}</strong></span>
 		{{end}}
 	{{end}}

templates/repo/latest_commit.tmpl

@@ -120,6 +120,7 @@ td .commit-summary {
   align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
+  gap: 0.25em;
 }
 
 @media (max-width: 767.98px) {
@@ -1701,6 +1702,10 @@ tbody.commit-list {
   white-space: nowrap;
 }
 
+.latest-commit .message-wrapper {
+  max-width: calc(100% - 2.5rem);
+}
+
 /* in the commit list, messages can wrap so we can use inline */
 .commit-list .message-wrapper {
   display: inline;