Open arturolinares opened 2 years ago
Hi there!
Thanks for filing this in!
What you're seeing here is actually the expected interaction between floated elements and block elements in the web.
Code-blocks are as the name suggests, display:block
elements. Consequently, when you have a floating image, the text itself gets indented / pushed-in while the width of the block element remains 100%.
Tried to reproduce your example as accurately as possible with some screenshot-magic. Here's a screenshot of the inspector with this code-block element highlighted :
As you can see it's 100% width.
What you're looking for could be done in 3 ways.
1) If code-blocks are actually inline-blocks
but then, here's how they would look like :
2) by using overflow : auto
on the code-blocks, however if the code-block has a long string of text, like a URL etc this could cause overflow issues :
3) OR by using a rather new and experimental CSS display style called flow-root
:
https://caniuse.com/flow-root
However, while flow-root
is supported by most browsers, it's still only a very new and working-draft addition to CSS. The tricky part here is, since all documents in Cryptee are encrypted, they have to work in a backwards compatible way. And essentially with any tiny change we make to the elements in the editor can break old documents forever. i.e. once you use them, and the document is encrypted, it will forever stay frozen-in-time that way. So we can only switch to flow-root once we know for sure it's here to stay, or a document you created today using flow-root
and encrypted would be broken in the future if flow-root
is no longer used.
I'm going to check to see if we can use overflow:auto
and still handle things like long links / strings of text etc in a meaningful way with some margin / padding etc hacks in a cross-browser compatible way. If it works as expected, we'll release a quick fix to get this fixed right away!
Hoping these make sense and help! ✌🏻
– I'm going to leave this open while we investigate a hacky fix, but for the moment, I'm marking this as a 'change request' and not a 'bug' per-se, since this is unfortunately an expected-behavior.
Describe the bug When using an image next to a code block, the background overlaps the image margins and area.
To Reproduce Steps to reproduce the behavior:
Expected behavior The code block background aligns with the image margins, along with the text.
Screenshots
System Information (please complete the following information):
Additional context NA