[Change] Change the way code blocks interact and overlap with floating images

[arturolinares]

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:

1. Type several paragraphs of text.
2. Add an image and align it to the left.
3. In the same line, add a code block.
4. The code background overlaps the image.

Expected behavior
The code block background aligns with the image margins, along with the text.

Screenshots

System Information (please complete the following information):

• Device: Laptop
• OS: Linux (Fedora 35)
• Browser: Vivaldi (Chrome)
• Browser Version: Any

Additional context
NA

[johnozbay]

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.