Correctly align resolved discussion text
The header of the `NoteableDiscussion` component is really a media object[1], 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[2]. 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. [1]: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ [2]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
Showing
Please register or sign in to comment