UIShell sidenav: submenu indentation wrong when icons and bx--side-nav--fixed

[wkeese]

Indentation issue with sidenav submenu items in sidenav with icons when bx--side-nav--fixed set

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

The default submenu indentation (padding-left) CSS from _sidenav.scss is:

  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link {
    height: mini-units(4);
    min-height: mini-units(4);
    padding-left: mini-units(4);
    font-weight: 400;
  }

However, it adds more indent when the top level menu item has an icon:

  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
    a.#{$prefix}--side-nav__link {
    padding-left: mini-units(9);
  }

So far so good. But the CSS above gets overridden by this CSS, reverting the indentation back to 4:

  .#{$prefix}--side-nav--fixed
    .#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link {
    padding-left: mini-units(4);
  }

Note that the problem doesn't happen on https://react.carbondesignsystem.com/?path=/story/ui-shell--fixed-sidenav-w-icons because it doesn't set bx--side-nav-fixed, despite the name of the story.