Drawer item title margin offsets item alignment

[kirsty-hames]

Subject of the issue

Margin is applied to .drawer__item-title which is inherited by all drawer plugins. However, most plugin items only contain a title so the margin isn't required. It's a minor issue but the addition of margin does offset the position making the title display off-center vertically.

Looking at the existing drawer views (Resources, PageLevelProgress, Glossary, LanguagePicker and initial drawer view when multiple plugins are installed), margin is only needed when .drawer__item-title is followed by .drawer__item-body.

PageLevelProgress:

Resources:

Glossary:

Expected behaviour

Only apply margin when .drawer__item-title is followed by .drawer__item-body.

As a suggestion, the margin could be applied to the.drawer__item-body instead.

For example:

.drawer {
  &__item-title {
    .drawer-item-title;
    text-align: start;
  }

  &__item-body {
    margin-top: @drawer-title-margin;
    margin-bottom: @drawer-body-margin;
    .drawer-item-body;
    text-align: start;
  }
}