feat: use Grid to display the events link buttons

freeCodeCamp / chapter

A self-hosted event management tool for nonprofits

BSD 3-Clause "New" or "Revised" License

1.92k stars 360 forks source link

feat: use Grid to display the events link buttons #2391

Closed Sboonny closed 1 year ago

Sboonny commented 1 year ago

[x] I have read Chapter's contributing guidelines.
[x] My pull request has a descriptive title (not a vague title like Update README.md).
[x] My pull request targets the main branch of Chapter.

MenuButton wraps its child in span, so changing its layout as I was planning is impossible without using position, this reverts to using grid

You can test the changes in

/dashboard/chapters/3

ghost commented 1 year ago

👇 Click on the image for a new way to code review

#### [![Review these changes using an interactive CodeSee Map](https://s3.us-east-2.amazonaws.com/maps.codesee.io/images/github/freeCodeCamp/chapter/2391/23358911/fe3c84b175339d5e401c3e3752bce8b2b6add2c7.svg)](https://app.codesee.io/r/reviews?pr=2391&src=https%3A%2F%2Fgithub.com%2FfreeCodeCamp%2Fchapter) #### Legend CodeSee Map legend

Sboonny commented 1 year ago

rec-tab (11).webm

In smaller screens the tags overflow and there is high chance that someone may miss them, if the event name is too long.

I tried to fix this by adding the tags inside the menuButton, but the menuButton has its children wrapped in a span element that stop it from following any layout you desire except float layout.