In a single .cr-section, the second sticky figure with width=50% is not vertically centered and is bottom-clipped

[pensivedog]

Summary

When two sticky images are placed in the same .cr-section, the second sticky whose image has width=50% is not vertically centered in the viewport and appears cut off at the bottom.

Expected behavior

Each sticky figure should be vertically centered in the sticky pane and fully visible, regardless of whether an earlier/later sticky uses a different image width.

Actual behavior

In the minimal example below, the second sticky (with width=50%) is visually lower and bottom-clipped; it is not vertically centered.

---
format: closeread-html
---

:::{.cr-section}

@cr-one Example text.

@cr-two Example text.

:::{#cr-one}
![](test.png){fig-align="center"}
:::

:::{#cr-two}
![](test.png){width=50% fig-align="center"} 
:::

:::

Notes:

• test.png is the same asset for both stickies (any reasonably square or vertically taller portrait-oriented image will show it).
• The issue occurs when one figure is default width and a later figure sets width=50%.

[jimjam-slam]

Hi @pensivedog, are you able to give us a screenshot of what you're expecting to see? This is what I'm seeing with the following:

---
format: closeread-html
---

:::{.cr-section}

@cr-one Example text.

@cr-two Example text.

:::{#cr-one}
![](https://placehold.co/600x400){fig-align="center"}
:::

:::{#cr-two}
![](https://placehold.co/600x400){width=50% fig-align="center"} 
:::

:::

That said, we generally don't support Quarto's figure layout options well within Closeread sections. What kind of effect are you hoping to achieve?

[pensivedog]

Hi @jimjam-slam, thanks for the reply. It seems the image needs to be square or a vertically taller portrait-oriented image to trigger this issue. It also seems that it only happens when the image is taller than the viewport.

For instance, this works as expected, with both images properly vertically centered:

---
format: closeread-html
---

:::{.cr-section}

@cr-one Example text.

@cr-two Example text.

:::{#cr-one}
![](https://placehold.co/1600x2400){width=50% fig-align="center"}
:::

:::{#cr-two}
![](https://placehold.co/1600x2400){width=50% fig-align="center"} 
:::

:::

However, the following triggers the bug, causing the second image to lose vertical centering:

---
format: closeread-html
---

:::{.cr-section}

@cr-one Example text.

@cr-two Example text.

:::{#cr-one}
![](https://placehold.co/1600x2400){fig-align="center"}
:::

:::{#cr-two}
![](https://placehold.co/1600x2400){width=50% fig-align="center"} 
:::

:::