Some code blocks extend into the right hand panel on desktop

If a code block contains a line too long to fit in the available horizontal space, the excess to the right is hidden, with a scroll bar to allow seeing the rest (this is a good thing):

Raw text:

```text
This is an exceptionally long line for the purpose of demonstrating what happens when the right hand side exceeds the available horizontal space.
```

Rendered result:

This is an exceptionally long line for the purpose of demonstrating what happens when the right hand side exceeds the available horizontal space.

Summary section of a details section

However, if a code block is contained within a <details> section's <summary> section, the long line instead continues across the page to the right, obscuring the right hand panel:

Raw text:

<details>
<summary>

```text
This is an exceptionally long line for the purpose of demonstrating what happens when the right hand side exceeds the available horizontal space.
```

</summary>

```text
This is an exceptionally long line for the purpose of demonstrating what happens when the right hand side exceeds the available horizontal space.
```

</details>

Rendered result (looks fine in the editor preview):

This is an exceptionally long line for the purpose of demonstrating what happens when the right hand side exceeds the available horizontal space.

This is an exceptionally long line for the purpose of demonstrating what happens when the right hand side exceeds the available horizontal space.

If you are viewing on mobile, or a narrow desktop view (resized window or zoomed in content) the problem will not occur, so here's a screenshot:

Note that expanding the details section shows that the content revealed correctly has a scrollbar. Only the summary section continues across the page beyond the right hand edge of the post.

Quote block inside the summary of a details section

This problem does not show up while editing a post, so the poster has no way of knowing that it will happen until they have already saved the post. They may not notice until the next time they view their post.

There is a similar problem that does show up while editing the post:

If a code block is contained within a quote block within a <details> section's <summary> section, the long line continues across the page to the right even in the edit preview (you can see the difference between this example and the previous one by pressing "Suggest Edit" below this post):

Raw text:

<details>
<summary>

> ```text
> This is an exceptionally long line for the purpose of demonstrating what happens when the right hand side exceeds the available horizontal space.
> ```

</summary>

> ```text
> This is an exceptionally long line for the purpose of demonstrating what happens when the right hand side exceeds the available horizontal space.
> ```

</details>

Rendered result (broken even in the editor preview):

Note that again the content revealed correctly has a scrollbar.

Mobile and narrow desktop view

In a window narrower than 780 pixels, which covers most mobile browsers and also desktop browsers where the window has been resized or zoomed in, the problem does not occur. All of the examples above look fine, both in the editor preview and the saved post. This makes it easier for someone to create a post with this problem without realising it.

This may also hint at a solution, for anyone investigating how to fix this.

posted over 1 year ago

CC BY-SA 4.0

1y ago

trichoplax‭

225 75 718 300