In a contribution page, if many moderators approve or reject the contribution, the avatars boxes will grow the right column of the page and make the page go to mobile mode if there’s too many, reproducing the same problem I reported before. This problem is more evident in small screens, like mine (1366x768px).
Right column is larger
If more avatars are added the boxes, the right side will keep growing.
If one more is added, the page goes to mobile mode.
This also happens in big screens, since the maximum width of the page’s content is 1770px
This issue is happening because the unordered list of items <ul> that holds the moderator avatars is not overflowing correctly.
First, cg-moderator-manager should have max-width of 50% of the parent’s width, since the parent component just have two elements inside and it has display: flex. Another solution would be setting the parent component to display: grid; grid-template-columns: 50% 50%.
After that, the list of moderator avatars would be overflowing correctly. Now .cg-content-moderator-avatars just need overflow-x: auto and change justify-content to safe center instead of center.
This fixes the problem of the page changing it’s layout to 1 column. But, I would recommend setting the second column’s max-width value to 41% so the proportion stays the same in any screen.
Screenshot 1: no max-width. Screenshot 2: max-width: 41% 1366px screen. Screenshot 3: max-width: 41% 1935px screen
/* Makes "Approve" and "Reject" boxes the same width */
.cg-moderator-manager-component {
max-width: 50%;
}
/* Adds a scrollbar to large boxes and fixes clipping avatars */
.cg-content-moderator-avatars {
overflow-x: auto;
justify-content: safe center;
}
/* Recommendation: Makes layout consistent */
aside.game-codingamer-infos {
max-width: 41%;
}