Sidebar menu dropdown arrow size varies on long width lines

[duanwilliam]

🐛 Bug Report

Lines whose length are close to but do not exceed the maximum length for a sidebar menu item (classic theme; don't know if it affects others) affect the location and size of the dropdown arrow.

Encountered while building pure CSS sidebar menu, of which, whoever it's built by, will ideally not have this issue so it may not necessarily be the highest priority.

Have you read the Contributing Guidelines on issues?

yes.

To Reproduce

1. Create a new Docusaurus site using the classic theme.
   npx @docusaurus/init@latest init [name] classic
2. Add sidebar categories with labels close to the length of sidebar item max length to sidebars.js. For example,

module.exports = {
  docs: [
    {
      items: [
+       {
+         'Normal Category Name': ['thank-you'],
+         'Long Category Name ...............................': ['thank-you'],
+         'Longer Category Name ...............................................': ['thank-you'],
+         'Even Longer Category Name ............................................................': ['thank-you'],
+         'Even Longer Category Name ....................................... ............................................': ['thank-you'],
+         'A Very Very Very Very Very Long Category Name': ['thank-you'],
+       },
        // ...

3. Run the site and check the sidebar.

Expected behavior

The sidebar dropdown arrow is a constant size, at the very least among items at the same indentation level.

Actual Behavior

The sidebar arrow sizes can very in size and location even among items on the same indentation level.

Your Environment

• Docusaurus version used: 2.0.0-alpha.72
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome 89.0.4389.90, Node.js 14.15.0
• Operating system and version (desktop or mobile):

[lex111]

Fixed in facebookincubator/infima#106 and during next Infima upgrading, we will close this issue.