Correctly align resolved discussion text
What does this MR do?
Correctly align resolved discussion text, fixing #55206 (closed).
The header of the NoteableDiscussion
component is really a media object,
but it didn't have the right DOM or styling to correctly achieve it.
This change wraps all the children of the media object (except the floated
image) in a dedicated .timeline-content
element, which is styled to establish
its own block formatting context. This ensures all of its children sit
left-aligned to the right edge of the float.
In short, the DOM used to look like this:
.discussion-header
.timeline-icon
note-header
note-edited-text
and now it looks like this:
.discussion-header
.timeline-icon
.timeline-content (with own formatting context)
note-header
note-edited-text
This is also now more consistent with the DOM of NoteableNote
, in that
.timeline-icon
and .timeline-content
seem to want to be siblings.
What are the relevant issue numbers?
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary -
Documentation created/updated via this MR -
Documentation reviewed by technical writer or follow-up review issue created -
Tests added for this feature/bug -
Tested in all supported browsers -
Conforms to the code review guidelines -
Conforms to the merge request performance guidelines -
Conforms to the style guides -
Conforms to the database guides -
Link to e2e tests MR added if this MR has Requires e2e tests label. See the Test Planning Process. -
Security reports checked/validated by reviewer