style the figure element?

The use case (at the bottom of this notebook) is a Plot that we want to make 2800px wide, and which should scroll horizontally in Observable.

My suggestion was to create a figure parent by adding a caption, then setting max-width + scroll overflow styles to the parent, like so:

Object.assign(
Plot.plot({ 
  width: 2800, height: 700, // sets the viewBox of the .plot svg
  caption: "", // wraps the plot in a figure element
  style: {maxWidth: "2800px"}, // overrides max-width: 100%; of the .plot default css
  … rest of the plot definition
}),
  { style: `max-width: ${width}px; overflow: scroll` } // overrides the figure/max-width style of observable and adds scrolling
)

it looks like there should be a better way at least to set styles on the figure element

Start with the Plot.plot call and the linked Observable notebook, focusing on how caption causes a figure wrapper and how figure styles are currently applied. Trace the existing style options and wrapper behavior, then define and test a clearer way to style the figure so a 2800px plot can scroll horizontally without manually assigning styles.