Images in 'li' tags display in inline rather than block mode.

[seanlip]

Describe the bug

Images in 'li' tags display in inline mode, which is incorrect, and results in such images being cut off.

Instead, such images should be displayed in block mode and centered.

To Reproduce

In the production version of the app, go to Multiplication > Revision card > Techniques of multiplication. Then scroll down the page.

Expected behavior The image should appear on its own line, and be centered.

Environment

• App version: 0.10-alpha_kenya

[seanlip]

Older discussion per @BenHenning (copied and summarized from #4856):

• This will come down to the markup. In this case, it seems there is no paragraph break for the image.
• Per Sean, non-LaTeX images should always be block-rendered. I can confirm we do that today per ImageTagHandler, however we don't actually make sure block images are "blocked out" away from lines of text. This might be as simple as just adding breaks around the block images.

Note that the above discussion was before the realization that this image was in an 'li' tag. Since other images render fine, the image being in an 'li' tag is what seems to be the cause of the issue.

[seanlip]

Note: I "fixed" this particular instance by updating the Multiplication revision card on Web to avoid the image being within the li tag (so that list is really three separate ul's with 1 li tag each), but similar issues will still appear on other topic cards where the image is within the li tag.

[manan1979]

hi @seanlip can i work on this issue

[seanlip]

@manan1979 As mentioned in several other issue threads, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue. Thanks.