Misaligned search box

[sebdanielsson]

Please describe the bug you are seeing

After installing the search box was misaligned. Seems like the following css is to blame:

.searchBox_dLyj {
  padding: var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal);
}

Before:

After:

How can we best reproduce the bug?

No response

Which version of Docusaurus and @cmfcmf/docusaurus-search-local are you using?

yarn list v1.22.18 ├─ @cmfcmf/docusaurus-search-local@0.10.0 ├─ @docusaurus/core@2.0.0-beta.20 ├─ @docusaurus/cssnano-preset@2.0.0-beta.20 ├─ @docusaurus/logger@2.0.0-beta.20 ├─ @docusaurus/mdx-loader@2.0.0-beta.20 ├─ @docusaurus/module-type-aliases@2.0.0-beta.20 ├─ @docusaurus/plugin-content-blog@2.0.0-beta.20 ├─ @docusaurus/plugin-content-docs@2.0.0-beta.20 ├─ @docusaurus/plugin-content-pages@2.0.0-beta.20 ├─ @docusaurus/plugin-debug@2.0.0-beta.20 ├─ @docusaurus/plugin-google-analytics@2.0.0-beta.20 ├─ @docusaurus/plugin-google-gtag@2.0.0-beta.20 ├─ @docusaurus/plugin-sitemap@2.0.0-beta.20 ├─ @docusaurus/preset-classic@2.0.0-beta.20 ├─ @docusaurus/react-loadable@5.5.2 ├─ @docusaurus/theme-classic@2.0.0-beta.20 ├─ @docusaurus/theme-common@2.0.0-beta.20 ├─ @docusaurus/theme-search-algolia@2.0.0-beta.20 ├─ @docusaurus/theme-translations@2.0.0-beta.20 ├─ @docusaurus/types@2.0.0-beta.20 ├─ @docusaurus/utils-common@2.0.0-beta.20 ├─ @docusaurus/utils-validation@2.0.0-beta.20 └─ @docusaurus/utils@2.0.0-beta.20

Which Node.js version are you using?

16.x on Vercel

Which theme are you using?

Yes, I am using @docusaurus/theme-classic

How does your plugin config look like?

    [
      require.resolve("@cmfcmf/docusaurus-search-local"),
      {
        // whether to index docs pages
        indexDocs: true,

        // Whether to also index the titles of the parent categories in the sidebar of a doc page.
        // 0 disables this feature.
        // 1 indexes the direct parent category in the sidebar of a doc page
        // 2 indexes up to two nested parent categories of a doc page

        // Do _not_ use Infinity, the value must be a JSON-serializable integer.
        indexDocSidebarParentCategories: 0,

        // whether to index blog pages
        indexBlog: true,

        // whether to index static pages
        // /404.html is never indexed
        indexPages: true,

        // language of your documentation, see next section
        language: "en",

        // setting this to "none" will prevent the default CSS to be included. The default CSS
        // comes from autocomplete-theme-classic, which you can read more about here:
        // https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic/
        style: undefined,

        // lunr.js-specific settings
        lunr: {
          // When indexing your documents, their content is split into "tokens".
          // Text entered into the search box is also tokenized.
          // This setting configures the separator used to determine where to split the text into tokens.
          // By default, it splits the text at whitespace and dashes.
          //
          // Note: Does not work for "ja" and "th" languages, since these use a different tokenizer.
          tokenizerSeparator: /[\s\-]+/,
          // https://lunrjs.com/guides/customising.html#similarity-tuning
          //
          // This parameter controls the importance given to the length of a document and its fields. This
          // value must be between 0 and 1, and by default it has a value of 0.75. Reducing this value
          // reduces the effect of different length documents on a term’s importance to that document.
          b: 0.75,
          // This controls how quickly the boost given by a common word reaches saturation. Increasing it
          // will slow down the rate of saturation and lower values result in quicker saturation. The
          // default value is 1.2. If the collection of documents being indexed have high occurrences
          // of words that are not covered by a stop word filter, these words can quickly dominate any
          // similarity calculation. In these cases, this value can be reduced to get more balanced results.
          k1: 1.2,
          // By default, we rank pages where the search term appears in the title higher than pages where
          // the search term appears in just the text. This is done by "boosting" title matches with a
          // higher value than content matches. The concrete boosting behavior can be controlled by changing
          // the following settings.
          titleBoost: 5,
          contentBoost: 1,
          parentCategoriesBoost: 2, // Only used when indexDocSidebarParentCategories > 0
        }
      },
    ],

Additional context

No response

[sivaraam]

I observed this too. For now I'm working around this using the following snippet in src/pages/styles.module.css:

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

For the note, this style appears to be coming from the docusaurus Search component itself. So, I started a discussion there regarding this to get some hints.

[slorber]

Docusaurus maintainer here

As of https://github.com/facebook/docusaurus/pull/7164, the margin in the search navbar component is applied by Docusaurus, and should not be handled internally by search lib authors

I suspect you should remove this CSS:

.dsla-search-wrapper {
  margin-left: var(--aa-spacing);
}

Note that the search is a real navbar item now, and you should not assume it can be added to the right or left: it can be added to both sides with config so using margin-left is not good in all cases.