Add Avatar Border for Visual Consistency

[kerwin612]

For the ① mentioned in the comment (#32565 (comment)).

Add a border to the Avatar to avoid poor visual experiences caused by irregularly sized images.

before:

after:

[lunny]

The new design looks a bit off—there are two overlapping borders.

[wxiaoguang]

To be honest, the border is more ugly than before

[kerwin612]

To be honest, the border is more ugly than before

This is indeed a matter of "choice". No matter how one chooses, there will always be some who find it suitable and some who don't. This is quite normal, and I fully understand it.

Currently:

After adding the border:

(issues such as border style can be adjusted additionally)

I think we should first make a choice and confirm whether we need borders.
If it's confirmed that borders are needed, I will continue to improve this PR. If not, I will close this PR.

@lunny @wxiaoguang

[wxiaoguang]

I think we should first make a choice and confirm whether we need borders. If it's confirmed that borders are needed, I will continue to improve this PR. If not, I will close this PR.

I would say no to current state, these screenshots look more ugly.

[silverwind]

I personally dislike both circling and border, with circling being the more severe of the two. If there is a border, there should also be a subtle background change. And it wouldn't fit in all places, like on the user page where it looks strange imho with the double border.

When GitHub introduced the circles around 2 years ago, they visually broke a lot of avatars where essential parts of the avatar were cut off. So it's a somewhat breaking change too.

[kerwin612]

Can we initiate a vote to decide whether to adopt borders or not?
Known: Gitea's avatars can be edited through API and there is no aspect ratio restriction; therefore, there must exist issues of visual inconsistency as described in issue #31990.

Option 1: Keep the current status;
Option 2: Add a simply border; (current PR)
Option 3: Add a circular border.
Option 4: Other ...

[lunny]

Can we initiate a vote to decide whether to adopt borders or not? Known: Gitea's avatars can be edited through API and there is no aspect ratio restriction; therefore, there must exist issues of visual inconsistency as described in issue #31990.

Option 1: Keep the current status; Option 2: Add a simply border; (current PR) Option 3: Add a circular border. Option 4: Other ...

I prefer Option 2 but with no double borders now.

[kerwin612]

(25f2062) The border and background color of the cards on the left side of the profile have been removed, avoiding the "double border" issue that arises when adding a border to the avatar.

[wxiaoguang]

Does it look right here? None of these icons has border except the avatar?

[kerwin612]

Does it look right here? None of these icons has border except the avatar?

Simply adding borders to icons is too ugly:

Refactor the layout to make it look like it's coordinated:

But it also involves mobile adaptation, which is a bit complicated, so I'll try again.

[wxiaoguang]

But it also involves mobile adaptation, which is a bit complicated, so I'll try again.

Yup, the improvements need to be designed globally and carefully.

[kerwin612]

before:

after:

before:

after:

Avoiding excessively broad and significant changes within a single pull request

[lunny]

I think we should add the avatars border in this pull request but not other buttons. But the new look of profile page is not good to me.

code change

[kerwin612]

Then this PR returns to its original theme, solely addressing the visual experience issue caused by avatars of different proportions by adding a unified and proportional border to them.

Any subsequent optimizations or suggestions arising from this will be handled in separate PRs.