Calendar not resizing to container width

[lukecharle]

So I've added cal-heatmap in my Shopify app, which uses the Polaris library for the UI. I'm having an issue where the calendar isn't fitting to my container. Originally I set the SVG to a max width and width of 100% to resolve the overflow scroll, but then I'm unable to see remaining days, clicking next does nothing because technically I'm already at the end of the calendar, but its actually just overflowing.

Is there anyway to resolve this?

Screen.Recording.2024-10-19.at.13.mp4

These are my options I've used, I haven't disabled dynamicDimension so I would've expected it to fit to my container.

cal.paint(
  {
    itemSelector: calRef.current,
    range: 12,
    data: {
      source: data,
      type: 'json',
      x: 'date',
      y: 'inventoryQuantity'
    },
    date: {
      start: new Date(new Date().getFullYear() - 1, 8, 21), // September 21st of the previous year
      min: new Date(new Date().getFullYear() - 1, 8, 21),
      max: new Date(new Date().getFullYear(), 8, 20) // September 20th of the current year
    },
    scale: {
      color: {
        type: 'threshold',
        range: ['#14432a', '#166b34', '#37a446', '#4dd05a'],
        domain: [10, 20, 30]
      }
    },
    domain: {
      type: 'month',
      gutter: 4,
      label: { text: 'MMM', textAlign: 'start', position: 'top' }
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 }
  },
  [
    [
      Tooltip,
      {
        text: function (date, value, dayjsDate) {
          return (
            (value ? value : 'No') +
            ' contributions on ' +
            dayjsDate.format('dddd, MMMM D, YYYY')
          );
        }
      }
    ],
    [
      LegendLite,
      {
        includeBlank: true,
        itemSelector: '#ex-ghDay-legend',
        radius: 2,
        width: 11,
        height: 11,
        gutter: 4
      }
    ],
    [
      CalendarLabel,
      {
        width: 30,
        textAlign: 'start',
        text: () =>
          Array.from({ length: 7 }, (_, i) =>
            i % 2 === 0 ? '' : format(new Date(2023, 0, i + 1), 'EEE')
          ),
        padding: [25, 0, 0, 0]
      }
    ]
  ]
);