Fix community section layout at some breakpoint

[driesvints]

Not sure what the breakpoint is but at some width, the community section looks a bit weird and squished.

[fabiorodriguesroque]

I can work on this issue. @driesvints

Context

What is causing this issue is the class "container" on the transition from xl to lg.

• Max width of XL is 1280px.
• Max width of LG is 1024px.

and as the layout use "container and mx-auto" we lose some space on lg screens.

Solution

One of the solutions that I was thinking of it would be hide the avatar from medium to large screens.

for mobile & smaller screens

from md to lg

xl or bigger

Improvements

apart of that I can noticed some more minor ui things on transitions from xl to smaller screens:

1. Navigation, icons & auth buttons looks like compressed on medium screens, Login button doesn't have space to follow the container size.

2. Navigation has some weird x-padding and is not be aligned with the container.

Please let me know if hide the avatar could be the solution to this issue, and if I should open an issue & pr to fix this two minor things.

[driesvints]

Hmm I think we'd still want to show the avatar. Maybe we can work with a truncate on the username and also make the font smaller on that breakpoint?

[driesvints]

https://tailwindcss.com/docs/text-overflow#truncate