Fix some UI regressions for commit list (#30920) (#30937)

Backport #30920 by wxiaoguang

Close #30919

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

diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl
index 6ca6dd5cdcb26c37895a38e557f4ca77c4f6c025..4c67319b8c05a74657a6668a732c055a2f03222f 100644 (file)
--- a/templates/repo/commits_list_small.tmpl
+++ b/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>
-               {{end}}
-               {{if IsMultilineCommitMessage .Message}}
-                       <pre class="commit-body tw-hidden">{{RenderCommitBody $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx)}}</pre>
+                       <button class="ui button ellipsis-button show-panel toggle" data-panel="[data-singular-commit-body-for='{{$tag}}']">...</button>
                {{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>

diff --git a/web_src/css/base.css b/web_src/css/base.css
index aa00c887545254fe0c9edda54ddc7d2d1c3b1efd..7a8f393f54a945c115b86e426c3f977fc2f90f52 100644 (file)
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -734,6 +734,7 @@ input:-webkit-autofill:active,
   font-weight: var(--font-weight-normal);
   margin: 0 6px;
   padding: 5px 10px;
+  flex-shrink: 0;
 }
 
 .ui .sha.label .shortsha {

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index f02b2b7578c68268d3d7fe7d8dc0d0dd60d49c10..67b178350ec763b85ef75bfefd721511ad1d878a 100644 (file)
--- a/web_src/css/repo.css
+++ b/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;
 }