fix: Fix the last avatar being truncated in members component

[machour]

Also extracted the avatar size into a variable

[chinesedfan]

@machour Good job! But I am not sure whether it is fixed in different kinds of screen width devices.

[machour]

@chinesedfan What resolution do you think can be problematic here? I'm simply using a margin on the list instead of the padding that was set.

Here's how it is in the inspector now:

[chinesedfan]

@machour We have avatarWidth = 30 and avatarMarginRight = 5, so that the width of 10 members will be 30 * 10 + 5 * (10 - 1) = 345. After added your paddings, 2 * 15, it happens to equal to the iPhone6 screen width, 375.

It is only perfect for devices with screen width like 375, 340, 305, and so on. For example, in iPhone5, whose screen width is 320, the last avatar only has 15/30 is shown.

[machour]

Oh, I get what you're saying.
Personally, as this is a scrolling list, I think that it's better if we have an avatar not displayed fully at the end, so the user understands that he can scroll.

Prior to my PR, the last avatar, when we scrolled to the end of the list, was cropped (check on your master checkout to see the bug)

[machour]

To avoid confusion, this is what this PR fixes:

before: (last user is cropped)

after:

[housseindjirdeh]

Beautiful thank you 🙌