Search box misaligned since beta 20

[sivaraam]

I'm using the cmfcmf/docusaurus-search-local plugin for search in the docusaurus website. Once I upgraded to beta 20, I noticed that the search bar became misaligned [related issue]. On exploring, it turns out disabling the following CSS rule fixes the misalignment [source]

@media (min-width: 997px) {
  .searchBox {
    padding: var(--ifm-navbar-item-padding-vertical)
      var(--ifm-navbar-item-padding-horizontal);
  }
}

For now, I've worked around this using the following CSS snippet in the src/pages/styles.module.css file:

@media (min-width: 997px) {
  [class^="searchBox"] {
    padding: unset;
  }
}

Any hints on the right way to fix this issue would be very helpful.

Screenshots

With v2.0.0-beta.18

With v2.0.0-beta.21

With v2.0.0-beta.21 (style disabled)

[slorber]

My answer here:

cmfcmf/docusaurus-search-local#117 (comment)