html article with toc on left and column-screen containing text has a vertical blanking bar that covers the text

[anielsen001]

Bug description

This is a screenshot of the output in my browser, showing the vertical bar covering the text. If I have the toc on the right, this does not occur, and if the content is an image instead of text, the vertical bar does not cover the graphic.

Steps to reproduce

This quarto document reproduces the issue when rendered.

---
title: "test"
format:
  html:
    toc: true
    toc-location: left
---

When the table of contents is on the left, it will leave a white vertical bar over text, but not graphics. It does not do this when on the right. 


## text left, figure right

:::::{.column-screen-inset}

::::{layout-ncol=2}

:::{.left}

{{< lipsum 2>}}

:::

:::{.right}

![placeholder]({{< placeholder >}})

:::

::::

:::::


## figure left, text right

:::::{.column-screen-inset}

::::{layout-ncol=2}


:::{.left}

![placeholder]({{< placeholder >}})


:::


:::{.right}

{{< lipsum 2>}}

:::

::::

:::::

Expected behavior

I don't expect the vertical bar to cover the text content.

Actual behavior

A vertical bar covers the text content when the table of contents is on the left and the column-screen attribute is set on a div.

Your environment

I'm just using a text editor and quarto render from the command line.

Quarto check output

quarto check
Quarto 1.6.40
[✓] Checking environment information...
Quarto cache location: /home/apn/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.4.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.46.3: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.6.40
Path: /opt/quarto/bin

[✓] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)

[✓] Checking LaTeX....................OK
Tex: (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
Version: 3.12.3
Path: /usr/bin/python3
Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with python3 -m pip install jupyter

[✓] Checking R installation...........(None)

  Unable to locate an installed version of R.
  Install R from https://cloud.r-project.org/

[mcanouil]

Your screenshot seems to come from a website project but you don't mention this, could you confirm and update your bug report?

Because If I use what you provided, I don't seem to reproduce your issue:

[anielsen001]

yes, I am using a web page project.

[anielsen001]

this repo reproduces the problem https://github.com/anielsen001/test-screen-column-inset

[mcanouil]

Note that the issue comes from the extra divs with class .left and .right which you need for complex content (such as multiple paragraphs).

This conflicts with the website envelope.

[anielsen001]

it works as expected if you put the TOC on the right in the default location. It also seems to have something to do with the toc-location keyword. If I set toc: false and leave toc-location: left then I still see the vertical blanking. I have to remove the toc-location keyword to get rid of the blanking in addition to setting toc: false

[mcanouil]

Thanks for the additional details.

[mcanouil]

Probably related to:

• strange behavior when toc-location is left #11770