How can I have .column-margin figures stay within their tabset tab despite resizing window?

[AnonymousCodeToad]

Description

Hi there,

Problem

I have a .panel-tabset containing two tabs. In the first tab, I'd like to have a couple figures in the margin using .column-margin. I'm using lightbox: true since my intention is for readers to click the figures to enlarge them if desired.

This works as intended unless the browser window is shrunken to 786px wide or less, at which point the figures end up above the entire tabset (i.e., above the all tab buttons) as if they don't belong to the selected tab at all.

Gif

Reprex

---
title: "Testing"
format:
  html:
    lightbox: true
---

```{r}
library(tidyverse)
data("Titanic")
d <- as.data.frame(Titanic)
```

# H1
::::::: {.panel-tabset}

## Tab A
```{r}
print(d$Class)
```

::::: {.column-margin}
```{r}
d %>% ggplot(aes(x = Class, y = Freq, fill = Survived)) +
  geom_bar(stat = "identity", position = "fill")
```

```{r}
d %>% ggplot(aes(x = Class, y = Freq, fill = Age)) +
  geom_bar(stat = "identity", position = "fill")
```
:::::

## Tab B
```{r}
print(d$Freq)
```

:::::::

Info

Quarto 1.6.42
RStudio 2024.12.1 +563
Replicated in Firefox & Chrome
Windows 11

Ask/Context

I know responsively repositioning margin content to the main body when the window shrinks horizontally is intended behavior, so:

I'm hoping someone can help me figure out how to at least have the figures get moved below the Tab A content so they at least stay where they belong.

I thought that making sure the .{column-tabset} div was below the chunk that outputs Tab A's body content would resolve this (assumed that the responsiveness stuff honors document order of content), but no luck there.

I don't know much of anything about web design and suspect I might be missing something obvious here.

If this is a bug, I would greatly appreciate any sort of hacky CSS solutions in the meantime. I was thinking maybe disabling the margin responsiveness altogether (forcing horizontal scrolling) as a last resort, but having the repositioned margin figures stay within the tab, and ideally below the tab's main body content, would be really great if possible.

Thanks for reading my first ever post!

[mcanouil]

The margin does is not in tabset, it's outside of it in the sense of HTML.

A less heavy reproducible example (if you use only ggplot2 and magrittr, don't use library(tidyverse) which has a lot of dependencies):

---
title: "Testing"
format:
  html:
    lightbox: true
engine: markdown
---

::::::: {.panel-tabset}

### Tab A

{{< lipsum 2 >}}

::::: {.column-margin}

{{< placeholder 60 40 >}}

{{< placeholder 60 40 >}}

:::::

### Tab B

{{< lipsum 1 >}}

:::::::

If you inspect the HTML using your favourite browser, then you see that the margin for the tabset is "above" / "before" the actual tabset:

If you want to put it under, then CSS won't be enough, you're very likely gonna need JavaScript.

But moving the div elsewhere is also not enough on its own:

Screen.Recording.2025-02-25.at.23.54.51.mov

Now, you either find yourself how to tweak the layout (not a bug) or wait for someone willing to spend time figuring out the whole thing for you.

[AnonymousCodeToad]

Ok, thanks for taking the time to reply. And sorry for the inappropriate reprex.

I don't know much (anything?) about web development and just thought this behavior was counterintuitive, but I understand now that it's fully intentional.

I don't get the sense that this would be welcome as a feature request. And maybe this is not a popular use case anyway considering I couldn't find any similar discussions of margin content within tabsets.

I will try to figure this out myself and will update this thread if I do.

[mcanouil]

inappropriate reprex

Your reprex was 100% fine to see your issue. My comment was simply a feedback about "tidyverse". It's useful when working with the whole thing, but it's heavy.

I don't get the sense that this would be welcome as a feature request. And maybe this is not a popular use case anyway considering I couldn't find any similar discussions of margin content within tabsets.

I cannot answer that.
But changing how the margin is handled will require quite some work in the codebase to make this happen if the Quarto team decides to work on this.
You can still open a feature request discussion about changing the order of margin/content to content/margin which would allow the community to upvote it eventually.