[new docs site] UI bug with on rules index and details pages

[nzakas]

For the new documentation site, we have a UI bug when displaying information about recommended/fixable/suggestions on both the rule index page and the rule details pages.

Basically, we can have 0-3 of these showing at any time. When only one is shown, it should take the full width of the page, like this:

This part is actually working correctly. 👍

When two are shown, it should look like this:

And when three are shown, it should look like this:

The rules index page should always show three, but right now it is not styled correctly and is wrapping to two lines:
https://new.eslint.org/docs/rules/

The rules details pages stack the messages one on top of the other (once this PR is merged: #15902)

[btmills]

I believe this is working as intended. In sufficiently wide windows (~1300px), I'm seeing the three side by side on https://new.eslint.org/docs/rules/. On narrower windows, it automatically wraps due to the auto-fit and minmax on the grid-template-columns.

[nzakas]

Ah gotcha. My screen apparently doesn't go wide enough to see that view.

Then the only outstanding issue is that the background colors and borders are missing.

[DeepshikaS]

I would like to work on this. Border and background color needs to be added right?

1. Current UI:

2. Expected UI :

Basically, It should look like the 2nd Image?

[nzakas]

Correct. 👍

[DeepshikaS]

Correct. 👍

I'm working on it. Will raise a pr

[nzakas]

Fixed by #16082