I am trying to customize the behavior of a horizontal legend in Plotly.js for varying viewport widths.

Minimal example:

(function () {
    const d3 = Plotly.d3;

    const WIDTH_IN_PERCENT_OF_PARENT = 60;
    const HEIGHT_IN_PERCENT_OF_PARENT = 80;

    const gd3 = d3
        .select("body")
        .append("div")
        .style({
            width: WIDTH_IN_PERCENT_OF_PARENT + "%",
            "margin-left": (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + "%",
            height: HEIGHT_IN_PERCENT_OF_PARENT + "vh",
            "margin-top": (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + "vh"
        });

    const gd = gd3.node();

    const labels = ["Tatooine", "Hoth", "Endor", "Alderaan"];
    const traces = [
        { name: "Luke Skywalker", color: "#1f77b4", y: [5, 10, 2, 8] },
        { name: "Leia Organa", color: "#ff7f0e", y: [9, 6, 3, 12] },
        { name: "Han Solo", color: "#2ca02c", y: [7, 9, 4, 10] },
        { name: "Chewbacca", color: "#d62728", y: [4, 8, 11, 6] },
        { name: "Darth Vader", color: "#9467bd", y: [11, 3, 9, 5] },
        { name: "Yoda", color: "#8c564b", y: [10, 12, 7, 8] },
        { name: "Boba Fett", color: "#e377c2", y: [3, 5, 9, 11] },
        { name: "Lando Calrissian", color: "#7f7f7f", y: [6, 7, 10, 4] },
        { name: "Obi-Wan Kenobi", color: "#bcbd22", y: [8, 9, 4, 7] },
        { name: "Emperor Palpatine", color: "#17becf", y: [12, 6, 5, 9] },
        { name: "Wedge Antilles", color: "#aec7e8", y: [7, 8, 5, 6] },
        { name: "Admiral Ackbar", color: "#ffbb78", y: [9, 4, 8, 10] },
        { name: "Greedo", color: "#98df8a", y: [5, 6, 7, 8] },
        { name: "Jabba the Hutt", color: "#ff9896", y: [11, 9, 4, 3] },
        { name: "Mon Mothma", color: "#c5b0d5", y: [6, 10, 8, 7] }
    ].map((t) => ({
        type: "bar",
        name: t.name,
        x: labels,
        y: t.y,
        marker: { color: t.color, line: { width: 1.5, color: "#333" } }
    }));

    const layout = {
        barmode: "group",
        legend: {
            borderwidth: 1,
            orientation: "h", // horizontal
            x: 0,
            xanchor: "left",
            y: 1.1, // a bit higher above the plot area
            yanchor: "bottom"
        },
        margin: { t: 80, r: 40, b: 60, l: 60 },
        font: { size: 16 }
    };

    Plotly.newPlot(gd, traces, layout);

    window.onresize = function () {
        Plotly.Plots.resize(gd);
    };
})();

Codepen: https://codepen.io/aaron-parisi-turngate/pen/OPMBRmJ

Make the viewport narrower and the legend won't take up the full width:

Full width:

Not full width:

I've messed with:

{
    entrywidth: 0.5,
    entrywidthmode: 'fraction'
}

which does the trick, but then I lose the automatic resize-based wrapping behavior, which I do still want.

Is there a way to tell plotly, "make sure the legend always takes up as much horizontal space as possible"?