Blockquote styling overlaps with user icon in comment display

Description

Steps to reproduce
Create a comment that contains a blockquote at the beginning of the comment body.

What happens
The text wraps around the floated user icon, the line indicating the blockquote however overlaps with the icon. The result is that the icon is positioned on top of the border and there's a large gap between the border and the text that has been pushed to the right by the icon. See attachment for an example.

What should happen
The comment content wraps around the floated user icon, the blockquote styling should be adjusted to work the same way. The gray line indicating the blockquote should be pushed to the right with the text, or the entire block should be pushed to below the icon.

Notes
This is not a render bug, the CSS behaves as we tell it to. We have to decide how blockquotes should behave in comments and adjust the CSS accordingly.

  • Tested in Firefox 72.02, Safari 13.05, Chrome 79 on Mac OS X.

  • Behaviour is the same with narrow, medium and wide viewport

  • Example is a comment for a work, but should be the same for all comments everywhere

 

Environment

None

Assignee

Unassigned

Reporter

bing

Roadmap

Comments

Priority

Low

Affects versions

Fix versions

None

Components

FrontEnd

Difficulty

Medium

Required Access Level

None

Milestone

Internal 0.9
Configure