Website: Wrong `Margin` for the BlockImage

[cyan33]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
In the jest website:

Whenever the text is on the right side of the block image, it gets the correct margin in between.(margin-right):

But it seems that the block-image component is only getting a margin-right. So when the text is on the left side, the margin is of no use (tho it seems not that obvious to the users):

But this one is obvious:

where there is no margin in between.

I'm happy to take the issue and fix this once it is recognized. 😄

[thymikee]

You're right. Happy to review the PR fixing these!

[SimenB]

Should it be here: https://github.com/facebook/Docusaurus/blob/2e1795319944f5e29297281083981eebd1726041/lib/static/css/main.css#L795-L799

Or in our custom css?

[thymikee]

Ideally we could fix this upstream, yea

[cyan33]

Thanks @SimenB @thymikee . I submitted a new issue in the Docusaurus project and hopefully I could fix that issue in a few days once that's recognized.

Will update here if that gets fixed. Thanks

[SimenB]

Fixed in #5321, /cc @orta (for upstream)

[cyan33]

Actually I don't think #5321 necessarily solves the addressed problem. @SimenB

[SimenB]

Oh? It fixes the video, but maybe your fix is a more generic one? (happy to reopen)

[cyan33]

Emm..It fixes the video, but doesn't fix the problem where when image is aligned right, there is no corresponding margin added in between the text and the image. See below:

Anyway, I think it's an issue related to the upstream repo, docusaurus.

A PR is here concerning that issue: facebook/docusaurus#398 (comment)

Maybe have these two combined. 😄

[SimenB]

Ah, OK. Let's keep this open then, we might be able to drop a bit of the custom CSS whenever it's released upstream.

[SimenB]

Reopening until we upgrade and potentially remove some of the css added in #5321.