From 471b6d24b49ca749a93dcb1f292774aaa8935369 Mon Sep 17 00:00:00 2001
From: Hester Gong <hestergong@gmail.com>
Date: Mon, 6 Mar 2023 23:44:04 +0800
Subject: [PATCH] Fix PR view misalignment caused by long name file (#23321)

Close #23248

The UI after this PR:


https://user-images.githubusercontent.com/17645053/223009758-7f0c9f12-d346-4cb2-a605-729fddce732f.mov
---
 templates/repo/diff/box.tmpl  |  4 ++--
 web_src/less/_repository.less | 19 +++++++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 4e6879650d..afd471368f 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -79,7 +79,7 @@
 						{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
 						<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
 							<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb">
-								<div class="gt-df gt-ac">
+								<div class="diff-file-name gt-df gt-ac gt-mr-3">
 									<a role="button" class="fold-file muted gt-mr-2" {{if not $isExpandable}}style="visibility: hidden"{{end}}>
 										{{if $file.ShouldBeHidden}}
 											{{svg "octicon-chevron-right" 18}}
@@ -96,7 +96,7 @@
 											{{template "repo/diff/stats" dict "file" . "root" $}}
 										{{end}}
 									</div>
-									<span class="file gt-mono"><a class="muted" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
+									<span class="file gt-mono"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{$.locale.Tr "repo.stored_lfs"}}){{end}}</span>
 									{{if $file.IsGenerated}}
 										<span class="ui label gt-ml-3">{{$.locale.Tr "repo.diff.generated"}}</span>
 									{{end}}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 9eaa8644f1..3b93a76a16 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1670,8 +1670,14 @@
     align-items: center;
 
     .file {
-      flex: 1;
-      word-break: break-all;
+      min-width: 0;
+      .file-link {
+        max-width: fit-content;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
     }
 
     .button {
@@ -3283,6 +3289,15 @@ td.blob-excerpt {
       position: static;
     }
   }
+
+  .diff-file-header-actions {
+    flex-shrink: 0;
+  }
+
+  .diff-file-name {
+    flex: auto;
+    min-width: 100px;
+  }
 }
 
 .diff-file-body {