🐛 Bug Report

The current blog layout is not ideal, particularly on large screens where blog titles wrap unnecessarily.

Also the spacing is not very good when there's a blog post list scrollbar

The ReactNative site has a better blog layout using custom CSS, but it's not ideal either to write this CSS as we have to target classes of the Infima grid system in a fragile way

For example, I used a similar solution for the Jest v2 website:

.main-wrapper.blog-wrapper .container .row {

  // Blog post list
  .col.col--2:first-child {
    --ifm-col-width: 22%;
    div[class^='sidebar'] {
      padding-right: 1rem;
    }
  }

  // Center
  .col.col--8 {
    --ifm-col-width: 62%;
    @media only screen and (max-width: 996px) {
      --ifm-col-width: 100% !important;
    }
  }

  // TOC
  .col.col--2:last-child {
    --ifm-col-width: 16%;
  }
}

We should rather adopt current ReactNative design in the default Docusaurus blog layout design in future versions, and stop using a basic css grid for that as we want the sides to grow when space is available.

cc @lex111 @Simek