search

quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.86k stars 314 forks source link

Using callout block at beginning of website post renders with skewed positioning #11029

Open kubu4 opened 6 days ago

kubu4 commented 6 days ago

Bug description

If a callout block is the first bit of content for a website post, then the resulting render of that post has skewed positioning, relative to other posts in the website. Here's a screencap demonstrating this. The October 4th post begins with a callout block and you can see the resulting render positioning.

Screencap of website render showing post with callout block as initial content skewed, relative to other posts.

Here's link to code from that post:

https://github.com/RobertsLab/sams-notebook/blob/adb98eb1258a21a208457b7262082ddadfa7831a/posts/2024/2024-10-04-FastQ-QC---A.pulchra-RNA-seq-from-Azenta-Project-30-1047560508/index.qmd

Steps to reproduce

Step to reproduce: Create a website post where the first text in the body is a callout block.

Repo: https://github.com/RobertsLab/sams-notebook

Reproducible example:

---
title: "Callout at beginning results in skewed render"
format: html

---

::: callout-note
This notebook entry is knitted from [`urol-e5/timeseries_molecular/D-Apul/code/00.00-D-Apul-RNAseq-reads-FastQC-MultiQC.Rmd`](https://github.com/urol-e5/timeseries_molecular/blob/b7a80beee932d773e3c61eb3e7c7f2aede5020d6/D-Apul/code/00.00-D-Apul-RNAseq-reads-FastQC-MultiQC.Rmd) (GitHub), commit `b7a80be`.
:::

This Rmd file will download raw RNA-seq FastQs for *A.pulchra* and evaluate them using [FastQC](https://github.com/s-andrews/FastQC) and [MultiQC](https://multiqc.info/).

# 1 Create a Bash variables file

This allows usage of Bash variables across R Markdown chunks.

Expected behavior

I expect the post to render and be aligned with other posts.

Actual behavior

The render post is skewed, relative to the positions of the other posts.

Your environment

IDE: VSCode OS: Kubuntu 22.04LTS

Quarto check output

$quarto check

Quarto 1.4.554
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.554
      Path: /opt/quarto/bin

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

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/bin
      Version: 2021

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

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

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

[✓] Checking R installation...........OK
      Version: 4.4.1
      Path: /usr/lib/R
      LibPaths:
        - /home/sam/R/x86_64-pc-linux-gnu-library/4.4
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.47
      rmarkdown: 2.27

[✓] Checking Knitr engine render......OK
mcanouil commented 5 days ago

Please update your Quarto CLI version to latest stable version.

cscheid commented 5 days ago

I can't repro with a simple blog created from quarto create project blog on Quarto 1.6.24. Can you provide a minimal example? Thanks.

kubu4 commented 5 days ago

Thanks so much for taking the time to evaluate this! Much appreciated.

Please update your Quarto CLI version to latest stable version.

$ quarto check

$Quarto 1.5.57
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.5.57
      Path: /opt/quarto/bin

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

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/bin
      Version: 2021

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

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

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

[✓] Checking R installation...........OK
      Version: 4.4.1
      Path: /usr/lib/R
      LibPaths:
        - /home/sam/R/x86_64-pc-linux-gnu-library/4.4
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.47
      rmarkdown: 2.27

[✓] Checking Knitr engine render......OK

Re-rendered site globally (quarto render in the root directory of the repo), but the issue persists.

Can you provide a minimal example?

I'll work on this...

kubu4 commented 5 days ago

@cscheid - I think I may have used incorrect lingo to describe the issue. This issue happens in a Quarto Blog, not a website as I previously indicated.

Steps to reproduce:

  1. Create new blog (follow RStudio directions)
  2. Edit index.qmd in posts/welcome to have a callout block immediately after yaml header.
  3. Render.
  4. Go to main page of blog.
  5. "Welcome" blog post is now rendered in a misaligned fashion from the other post ("Post with Code").

Image

I created a temporary git repo if you that works for a minimal example.

https://github.com/kubu4/quarto-callout-issue

Again, thanks for your time!!

EDITED: Clarified Step 2.

cderv commented 5 days ago

Thanks for the github repo to reproduce. I can see the problem.

However, I don't think this is because of the callout itself. It is because of the very long inline code urol-e5/timeseries_molecular/D-Apul/code/00.00-D-Apul-RNAseq-reads-FastQC-MultiQC.Rmd used in the link.

It seems the text does not wrap on very long string inside this listing page, like it does in the callout. So it is why the listing box is wider to accommodate very long urol-e5/timeseries_molecular/D-Apul/code/00.00-D-Apul-RNAseq-reads-FastQC-MultiQC.Rmd. Notice that it is not broken on two lines like it is the callout itself Image

So it is probably something about a CSS rule to adapt so that text is wrapped correctly 🤔 Related to display: flex logic and flex-grow rule IMO https://github.com/quarto-dev/quarto-cli/blob/e51b07e680ab9de6608167c36bbf304296864c75/src/resources/projects/website/listing/quarto-listing.scss#L596-L620

kubu4 commented 5 days ago

It is because of the very long inline code urol-e5/timeseries_molecular/D-Apul/code/00.00-D-Apul-RNAseq-reads-FastQC-MultiQC.Rmd used in the link.

Gah! That makes sense that it's the long inline code and not the callout block. Thanks for realizing that.

For my purposes, I'll just shorten that inline code so it renders properly.