Add small-user-avatars feature
#6492
Conversation
|
That looks better, but the alignment is off, see how nicely the name was wrapped before and how it's off-center now:
Also the height and
Maybe we should reduce the avatar and padding around it |
|
|
||
| /* Extra padding for `small-user-avatars` feature */ | ||
| .rgh-collaborator:has(.avatar) { | ||
| padding-bottom: 2px; |
There was a problem hiding this comment.
I don't think any of this CSS should be used, it's causing the misalignment and layout shift. It's best to align the image directly
There was a problem hiding this comment.
Here's a zero-shift image that can be inlined there without this CSS (rough values, just show it's possible)
<img class="from-avatar avatar-user" src="https://avatars.githubusercontent.com/u/44045911?s=40&v=4" width="14" height="14" alt="@kidonng" style="
margin-right: 3px;
vertical-align: -2px;
margin-left: -2.6px;
">
Tested in Chrome only, may need inline-flex or em to avoid font weirdness
There was a problem hiding this comment.
I really want to stick to 16px as that's what we use for reaction-avatars, but yeah 14px is fine, this place is just too small.
This is how it looks like now, without any magic numbers.
There was a problem hiding this comment.
Let's not bring these PRs into loops. I already commented on that, it's not aligned and it should be fixed. At a minimum it needs some negative left-margin. Maybe .ml-n1 if it exists
There was a problem hiding this comment.
This is the best I can do:
Perhaps I'm really bad at CSS, I just don't know how to
- Not change
highlight-collaborators-and-own-conversations - Not causing content shifts
- And have all these places aligned
So I don't get which places you want it aligned.
Did you mean the right side does not need to be aligned in #6492 (comment)? I certainly did not get that until now.
There was a problem hiding this comment.
I mean I want it as it appears in the gif I provided and the magic-numbered CSS. It's ok, I can look into a proper solution later if there's no easy way to achieve it. Dealing with text alignment is always a pain in CSS
|
Oops, this would be better using EDIT: done in #6488 |
|
Judging by the behavior on load, it doesn't need to: GitHub's own It's ok either way, the "deduplicate" logic is essentially deprecated now because we can't really trust it, it can change at any time and break everything again. |
| @@ -162,6 +162,7 @@ Thanks for contributing! 🦋🙌 | |||
| - [](# "clean-repo-tabs") [Moves the "Security" and "Insights" to the repository navigation dropdown. Also moves the "Projects", "Actions" and "Wiki" tabs if they're empty/unused.](https://user-images.githubusercontent.com/16872793/124681343-4a6c3c00-de96-11eb-9055-a8fc551e6eb8.png) | |||
| - [](# "repo-avatars") [Adds the profile picture to the header of public repositories.](https://user-images.githubusercontent.com/44045911/177211845-c9b0fa37-c157-4449-890e-af2602c312e3.png) | |||
| - [](# "quick-new-issue") [Adds a link to create issues from anywhere in a repository.](https://user-images.githubusercontent.com/1402241/218251057-b94b62dd-a944-4763-b78a-fc233f7c9fd3.png) | |||
| - [](# "small-user-avatars") [Shows a small avatar next to the username in conversation lists.](https://user-images.githubusercontent.com/44045911/230960291-721f42cc-e1ac-4fdc-83ea-2430b062f9ce.png) | |||
There was a problem hiding this comment.
Can you update this in your lint PR? All screenshots should be in light mode and with an arrow ideally. Also it's best to disable nearby features to avoid confusion
|
I love this, thank you!! |
|
Misaligned on iOS, this is why I was suggesting flexbox 🥲
|
|
Also it makes the list a little heavy/busy 🥲 it's probably worth it though, let's see how the feature is received. Before
After
|
Resolve #4906
Test URLs
Screenshot