Struggling to understand responsive plot sizing.

[rbcavanaugh]

I have a relatively simple page with a single plot in a single card and single column using grid. However, when the screen size is relatively wide, the card continues to increase in width but the plot maxes out around 700px. Is there a way to tie the plot size to the card? I think this documentation covers what I need: https://observablehq.com/framework/javascript#responsive-display but I'm struggling to get it to work. thanks!

Simplified example:

---
title: "OHDSI Frailty Study"
toc: false
theme: [air, alt]
---

```js
const data = FileAttachment("data.csv").csv({typed: true}).catch(() => console.error("unable to load csv"));
```

<center><h1>TITLE</h1></center>
 <div class="grid grid-cols-1">
    <div class="card">
      ${
        Plot.plot({
          title: "plot-title",
          marginBottom: 60,
          x: {
               type: "point",
               grid: true
            },
          color: {legend: true},
          marks: [
             Plot.ruleY([0]),
             Plot.dot(data, {x: "age_group",
                                        y: "score",
                                        stroke: "var",
                                        fx:"source",
                                        tip: true}),
            Plot.lineY(data, {x: "age_group",
                                       sort: "age_group",
                                        y: "score",
                                        stroke: "var",
                                        fx:"source"
                                        }),
            Plot.axisX({tickRotate: -45}),
          ]
        })
      }
  </div>
</div>

Here's an current image from the less simplified exampe:

[mbostock]

You need to use the resize function. Did you try that? It’s like this:

<div class="card">${resize((width) => Plot.plot({width, …}))}</div>

[rbcavanaugh]

ah yes thanks - stupid error on my part. thank you.