Fix community section layout at some breakpoint about laravel.io HOT 3 CLOSED

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.

from laravel.io.

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?

from laravel.io.

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

from laravel.io.