Skip to content

Correctly align resolved discussion text

Mark Florian requested to merge 55206-discussion-text-alignment into master

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?

#55206 (closed)

Does this MR meet the acceptance criteria?

Merge request reports