Add wrapper to author to avoid long name ui problem (#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. 

1 files changed, 15 insertions, 4 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 627a5f6c2f..83e8e1f338 100644
--- a/web_src/less/_repository.less
+++ b/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;
   }
 }