laravelio/laravel.io

Fix community section layout at some breakpoint

driesvints opened this issue · 3 comments

driesvints commented

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

Screenshot 2024-03-03 at 13 12 51
fabiorodriguesroque commented

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.
  1. 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 commented

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?