[macOS] [CodeBox] Margin is missing in all code boxes and Copy button overlaps when long code is displayed.

[DennyPerez18]

Current behavior

Expected behavior

How to reproduce it (as minimally and precisely as possible)

1. Display any CodeBox
2. Ex. Select Overview from the left menu
3. Click on View component from TexBox section
4. Scroll on the page and expand the code from Multiline section
5. Notice the margin is missing and the Copy button overlaps the code

Environment

Nuget Package:

Package Version(s):

Affected platform(s):

• [ ] iOS
• [x] macOS
• [ ] Android
• [ ] WebAssembly
• [ ] WebAssembly renders for Xamarin.Forms
• [ ] Windows
• [ ] Build tasks

Visual Studio:

• [ ] 2017 (version: )
• [ ] 2019 (version: )
• [x] for Mac (version: )

Relevant plugins:

• [ ] Resharper (version: )

Anything else we need to know?

[carldebilly]

Investigations

• The problem seems occur when the <TextBlock /> is forced to wrap because there's not enough available horizontal space to render the text.
• As soon there's not enough space for the text in the layout, the margins seems to dissapear and sometimes the content could be duplicated.
• The triggerring of the duplicated content is still unknown, but when it's happening, the text element is only present once in the managed visual tree (as we can see with .ShowLocalVisualTree()).

[carldebilly]

This issue won't be fixed for 3.5. In the mean time, we can use a work-around: use narrower text. The bug is happening when the text is wider than the available space.