Fix some UI regressions for commit list (#30920)

Close #30919

---------

Co-authored-by: silverwind <me@silverwind.io>

templates/repo/commits_list_small.tmpl

@@ -13,13 +13,12 @@
 
 		{{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}}
 
-		<span class="tw-flex-1 gt-ellipsis tw-font-mono{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject $.root.Context .Message $commitLink ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx)}}</span>
+		<span class="tw-flex-1 tw-font-mono gt-ellipsis" title="{{.Summary}}">
+			{{- RenderCommitMessageLinkSubject $.root.Context .Message $commitLink ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx) -}}
+		</span>
 
 		{{if IsMultilineCommitMessage .Message}}
-			<button class="ui button js-toggle-commit-body ellipsis-button" aria-expanded="false">...</button>
+			<button class="ui button ellipsis-button show-panel toggle" data-panel="[data-singular-commit-body-for='{{$tag}}']">...</button>
-		{{end}}
-		{{if IsMultilineCommitMessage .Message}}
-			<pre class="commit-body tw-hidden">{{RenderCommitBody $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx)}}</pre>
 		{{end}}
 
 		<span class="shabox tw-flex tw-items-center">
@@ -47,5 +46,10 @@
 			</a>
 		</span>
 	</div>
+	{{if IsMultilineCommitMessage .Message}}
+	<pre class="commit-body tw-ml-[33px] tw-hidden" data-singular-commit-body-for="{{$tag}}">
+		{{- RenderCommitBody $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx) -}}
+	</pre>
+	{{end}}
 {{end}}
 </div>

web_src/css/base.css

@@ -730,6 +730,7 @@ input:-webkit-autofill:active,
   font-weight: var(--font-weight-normal);
   margin: 0 6px;
   padding: 5px 10px;
+  flex-shrink: 0;
 }
 
 .ui .sha.label .shortsha {

web_src/css/repo.css

@@ -2349,14 +2349,10 @@ tbody.commit-list {
 .commit-body {
   margin: 0.25em 0;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   line-height: initial;
 }
 
-/* PR-comment */
-.repository .timeline-item .commit-body {
-  margin-left: 45px;
-}
-
 .git-notes.top {
   text-align: left;
 }