Add wrapper to author to avoid long name ui problem #23030

HesterG · 2023-02-21T04:13:37Z

Close #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. Which will work like below:

And title is added to the wrapper like it did in message wrapper. So the full author name will show on hover.

wxiaoguang · 2023-02-21T04:28:16Z

templates/repo/view_list.tmpl

@@ -8,14 +8,14 @@
 					{{if .LatestCommitUser}}
 						{{avatar $.Context .LatestCommitUser 24}}
 						{{if .LatestCommitUser.FullName}}
-							<a class="muted" href="{{.LatestCommitUser.HomeLink}}"><strong>{{.LatestCommitUser.FullName}}</strong></a>
+							<span class="author-wrapper" title="{{.LatestCommitUser.FullName}}"><a class="muted" href="{{.LatestCommitUser.HomeLink}}"><strong>{{.LatestCommitUser.FullName}}</strong></a></span>


Why not put these styles and title on <a> directly?

Why not put these styles and title on <a> directly?

Yes that is better putting them directly on <a> tag here. Changed that.

templates/repo/view_list.tmpl

Maks1mS · 2023-02-21T11:17:13Z

It doesn't seem to fix the problem (сheck in other languages).

wxiaoguang · 2023-02-21T11:22:12Z

I think the answer would be "flex". These max-width: styles don't work well for such layout.

HesterG · 2023-02-22T01:28:09Z

I think the answer would be "flex". These max-width: styles don't work well for such layout.

Flex could fix it, but might need more code changes like overriding of padding introduced by fomantic <th> and background change, etc. Used table-layout:fixed and reduced max-width for names for now.

HesterG · 2023-02-22T01:31:58Z

It doesn't seem to fix the problem (сheck in other languages).

Hi, tried another fix, please check again.

Maks1mS · 2023-02-22T05:36:45Z

It doesn't seem to fix the problem (сheck in other languages).

Hi, tried another fix, please check again.

I think 525 px is the best option (including commit signing, CI status etc.)

Maks1mS · 2023-02-22T05:41:04Z

Also need to change in other media queries. I will write the optimal values in the near future.

Maks1mS · 2023-02-22T05:55:58Z

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index e5f879e9e..5604386ba 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2936,7 +2936,7 @@ tbody.commit-list {
   }
 
   th .message-wrapper {
-    max-width: 280px;
+    max-width: 120px;
   }
 }
 
@@ -2946,7 +2946,7 @@ tbody.commit-list {
   }
 
   th .message-wrapper {
-    max-width: 490px;
+    max-width: 350px;
   }
 }
 
@@ -2956,7 +2956,7 @@ tbody.commit-list {
   }
 
   th .message-wrapper {
-    max-width: 650px;
+    max-width: 525px;
   }
 }

Maybe not perfect, but I think it's a good option without using flex and a lot of code changes.

HesterG · 2023-02-22T06:26:26Z

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index e5f879e9e..5604386ba 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2936,7 +2936,7 @@ tbody.commit-list {
   }
 
   th .message-wrapper {
-    max-width: 280px;
+    max-width: 120px;
   }
 }
 
@@ -2946,7 +2946,7 @@ tbody.commit-list {
   }
 
   th .message-wrapper {
-    max-width: 490px;
+    max-width: 350px;
   }
 }
 
@@ -2956,7 +2956,7 @@ tbody.commit-list {
   }
 
   th .message-wrapper {
-    max-width: 650px;
+    max-width: 525px;
   }
 }

Maybe not perfect, but I think it's a good option without using flex and a lot of code changes.

added a commit to use these values @Maks1mS, please check.

HesterG · 2023-02-23T08:07:00Z

This is how the long name and long description look like on different size of screen:

Please feel free to check. And if no more change is required, i think this PR is ready to merge.

jolheiser · 2023-02-23T20:27:59Z

🎺 🤖

This PR is a possible solution for issue go-gitea#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.

Backport #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. Which will work like below: <img width="1183" alt="2023-02-21 11 57 53" src="https://user-images.githubusercontent.com/17645053/220244146-3d47c512-33b6-4ed8-938e-de0a8bc26ffb.png"> <img width="417" alt="2023-02-21 11 58 43" src="https://user-images.githubusercontent.com/17645053/220244154-1ea0476b-9d1c-473a-9917-d3216860f9a9.png"> And `title` is added to the wrapper like it did in message wrapper. So the full author name will show on hover. Co-authored-by: HesterG <hestergong@gmail.com> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

* giteaofficial/main: Make issue meta dropdown support Enter, confirm before reloading (go-gitea#23014) Fix SyncOnCommit always return false in API of push_mirrors (go-gitea#23088) Fix commit name in Apply Patch page (go-gitea#23086) Add wrapper to author to avoid long name ui problem (go-gitea#23030) Avoid Hugo from adding quote to actions url (go-gitea#23097) Remove all package data after tests (go-gitea#22984) Change style to improve whitespaces trimming inside inline markdown code (go-gitea#23093) Nest metadata in refactoring docs (go-gitea#23087) # Conflicts: # templates/repo/issue/view_content/context_menu.tmpl

yardenshoham · 2023-02-24T21:53:44Z

Please send backport to v1.18

Backport #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. Which will work like below: <img width="1183" alt="2023-02-21 11 57 53" src="https://user-images.githubusercontent.com/17645053/220244146-3d47c512-33b6-4ed8-938e-de0a8bc26ffb.png"> <img width="417" alt="2023-02-21 11 58 43" src="https://user-images.githubusercontent.com/17645053/220244154-1ea0476b-9d1c-473a-9917-d3216860f9a9.png"> And `title` is added to the wrapper like it did in message wrapper. So the full author name will show on hover.

add wrapper to author to avoid long name ui problem

d6b0b5c

wxiaoguang reviewed Feb 21, 2023

View reviewed changes

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Feb 21, 2023

remove span for links and fix lint

abc9931

lunny added type/bug outdated/backport/v1.18 This PR should be backported to Gitea 1.18 skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. labels Feb 21, 2023

lunny added this to the 1.19.0 milestone Feb 21, 2023

fix lint

beb9c86

wxiaoguang reviewed Feb 21, 2023

View reviewed changes

templates/repo/view_list.tmpl Outdated Show resolved Hide resolved

remove span

a2a62d9

HesterG requested a review from wxiaoguang February 21, 2023 05:58

lunny approved these changes Feb 21, 2023

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Feb 21, 2023

wolfogre approved these changes Feb 21, 2023

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Feb 21, 2023

lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 21, 2023

lunny added 2 commits February 21, 2023 16:26

Merge branch 'main' into long-name-maxwidth-issue22866

9c1599f

Merge branch 'main' into long-name-maxwidth-issue22866

44e181e

Merge branch 'main' into long-name-maxwidth-issue22866

26ab2b6

lunny removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 21, 2023

table layout

15ed4b0

adjust mobile

97b9ed5

shorter long msg

18ca20f

change to better width for long msg

302fd15

yardenshoham modified the milestones: 1.19.0, 1.20.0 Feb 22, 2023

yardenshoham added the outdated/backport/v1.19 This PR should be backported to Gitea 1.19 label Feb 22, 2023

wolfogre added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 23, 2023

wolfogre and others added 4 commits February 23, 2023 16:10

Merge branch 'main' into long-name-maxwidth-issue22866

f6b4fab

Merge branch 'main' into long-name-maxwidth-issue22866

5ee7db7

Merge branch 'main' into long-name-maxwidth-issue22866

e523df3

Merge branch 'main' into long-name-maxwidth-issue22866

9457d32

jolheiser merged commit 8ed6096 into go-gitea:main Feb 23, 2023

jolheiser removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 23, 2023

yardenshoham mentioned this pull request Feb 23, 2023

Add wrapper to author to avoid long name ui problem (#23030) #23098

Merged

jolheiser mentioned this pull request Feb 24, 2023

Long full name/username causes repo view to overflow #22866

Closed

HesterG mentioned this pull request Feb 27, 2023

Add wrapper to author to avoid long name ui problem (#23030) #23172

Merged

wolfogre added the backport/done All backports for this PR have been created label Feb 27, 2023

HesterG deleted the long-name-maxwidth-issue22866 branch March 1, 2023 06:28

go-gitea locked and limited conversation to collaborators May 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add wrapper to author to avoid long name ui problem #23030

Add wrapper to author to avoid long name ui problem #23030

HesterG commented Feb 21, 2023 •

edited

wxiaoguang Feb 21, 2023

HesterG Feb 21, 2023 •

edited

Maks1mS commented Feb 21, 2023

wxiaoguang commented Feb 21, 2023

HesterG commented Feb 22, 2023

HesterG commented Feb 22, 2023

Maks1mS commented Feb 22, 2023

Maks1mS commented Feb 22, 2023

Maks1mS commented Feb 22, 2023 •

edited

HesterG commented Feb 22, 2023 •

edited

HesterG commented Feb 23, 2023

jolheiser commented Feb 23, 2023

yardenshoham commented Feb 24, 2023

Add wrapper to author to avoid long name ui problem #23030

Add wrapper to author to avoid long name ui problem #23030

Conversation

HesterG commented Feb 21, 2023 • edited

wxiaoguang Feb 21, 2023

Choose a reason for hiding this comment

HesterG Feb 21, 2023 • edited

Choose a reason for hiding this comment

Maks1mS commented Feb 21, 2023

wxiaoguang commented Feb 21, 2023

HesterG commented Feb 22, 2023

HesterG commented Feb 22, 2023

Maks1mS commented Feb 22, 2023

Maks1mS commented Feb 22, 2023

Maks1mS commented Feb 22, 2023 • edited

HesterG commented Feb 22, 2023 • edited

HesterG commented Feb 23, 2023

jolheiser commented Feb 23, 2023

yardenshoham commented Feb 24, 2023

HesterG commented Feb 21, 2023 •

edited

HesterG Feb 21, 2023 •

edited

Maks1mS commented Feb 22, 2023 •

edited

HesterG commented Feb 22, 2023 •

edited