fix overflowing plugins title and badge

[MikeMcC399]

Closes #5305

This PR adds css property flex-direction: column for the class pluginTitle in src/components/plugins-list/style.module.css, correcting a display issue on https://docs.cypress.io/plugins.

The plugin badge (official, verified, community or experimental) is now always displayed below the name of the plugin and it never overflows out of the plugin's box.

It also corrects a potential issue which has not been apparent so far, that an unhyphenated plugin name longer than 24 characters would also overflow. This is a consequence of combining h3 with flex.

Before

After

Verification

1. Display https://docs.cypress.io/plugins in Google Chrome / Mozilla Firefox and vary the width of the browser. Ensure that all plugin details stay within the plugin's box.

2. Temporarily add a 40 character unhyphenated plugin name (e.g. A234567890B234567890C234567890D234567890) and observe that this name stays inside the box independently of the browser's viewport width.

References

• MDN: flex-direction

cc: @elylucas

[netlify]

👷 Deploy request for cypress-docs pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	7920b3d

[cypress-app-bot]

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.

[MikeMcC399]

It could also be resolved by removing the h3, but then you would need to add some other formatting for the title text, so it seemed that flex-direction: column was the simplest and most effective solution.

[mike-plummer]

Nice find @MikeMcC399! We could also put a flex-wrap: wrap on the div but that would result in each badge wrapping at different points which doesn't look great. Only thing I don't like about using column is it looks slightly unbalanced due to the large bottom margin on the h3 vs the tiny space between the badge and the hr. Maybe we can adjust to balance it out a bit? Thoughts @elylucas ?

[MikeMcC399]

@mike-plummer

We could also put a flex-wrap: wrap on the div but that would result in each badge wrapping at different points which doesn't look great.

I also tried that out and didn't like the results.

[MikeMcC399]

Accidentally closed. Continued in #5333.