flex justification of headings applied too aggressively in stylesheet

[jtauber]

_body.scss includes:

// Right align links inside a header
h1, h2, h3, h4 {
  display: flex;
  justify-content: space-between;
  a {
      margin-top: auto;
      @extend .btn;
      @extend .btn-sm;
  }
}

Unfortunately, this doesn't just right align link inside a header but forces all children of an h* to be justified (e.g. <h1><span>A</span> <span>B</span></h1>)

I don't think we can assume this should be the default case for all h so I think we just have to live with this being triggered by a specific class on the h.

[jtauber]

workaround for now is just commenting out the rule in _body.scss in your project.

[paltman]

I think:

<h1 class="dm-flex justify-content-between">
    Title
    <a class="mt-auto btn btn-sm">Your Link</a>
</h1>

Will work if you want to have this style work with the extra markup.

---

Another solution is create a new class:

.action-title {
  display: flex;
  justify-content: space-between;
  > * {
      margin-top: auto;
  }
}

so that you can do:

<h1 class="action-title">
    Title
    <a class="btn btn-sm">Your Link</a>
</h1>