Semantic-ui: Message padding in accordion not right.

[lery12]

When i build:

<div id="root"></div>

<div class="ui styled accordion">
  <div class="active title">
    <i class="dropdown icon"></i>
    A
  </div>
  <div class="active content">
    <div class="ui message">
      message
    </div>
    <div class="ui message">
      <div class="content">message</div>
    </div>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
   B
  </div>
  <div class="content">
    <p></p>
  </div>
</div>

Expected Result
Both messages have the same padding in the accordion.

Actual Result
first messages has normal padding, while second has more padding.
This might also cause problems in: Cards, Headers etc...

Version
see: https://codepen.io/Traverse/pen/gWavdQ

[hammy2899]

The second message component has <div class="content">message</div> inside instead of just message like the first one

[traverse]

@hammy2899 There are cases where a message has a content div but the accordion styling shouldn't be of any influence to the styling of that, that's the problem here.

Example:

<div class="ui icon message">
  <i class="inbox icon"></i>
  <div class="content">
    <div class="header">
      Have you heard about our mailing list?
    </div>
    <p>Get the best news in your e-mail every day.</p>
  </div>
</div>

The issue is the following style:

.ui.styled.accordion .content,
.ui.styled.accordion .accordion .content {
  margin: 0em;
  padding: 0.5em 1em 1.5em;
}

This applies it to anything with a content class within an accordion which isn't really what you want. You'd want the following.

.ui.styled.accordion > .content,
.ui.styled.accordion .accordion > .content {
  margin: 0em;
  padding: 0.5em 1em 1.5em;
}