Honoring grid layout

I'm trying to integrate DayPilot into an new project we are building. On our dashboard, we are using tailwindcss and utilizing ithe standard grid layout. (see first screen shot)

When the DayPilot control renders, it blows up the grid layout and moves everything to the far left. I can't seem to find why it wants to be all the way to the left.

A few key facts:
* We are using the source code from React demo
* The project uses Astro.build and has a mix of Solidjs and React components
* It is the latest version of React
* All aspects of the demo seem to work properly except for where it is rendering

This is where it is loaded:

    <div class="col-span-3 w-7/12">
      <Calendar client: only="react"/>
    </div>

This is the render method:

  render() {
    return (
      <div class="flex dp-limit" style={styles.bbox}>
        <div style={styles.left}>
          <DayPilotNavigator
            selectMode={"week"}
            showMonths={2}
            skipMonths={1}
            startDate={"2023-03-07"}
            selectionDay={"2023-03-07"}
            onTimeRangeSelected={ args => {
              this.calendar.update({
                startDate: args.day
              });
            }}
          />
        </div>
        <div>
          <DayPilotCalendar
            {...this.state}
            ref={this.calendarRef}
          />
        </div>
      </div>
    );
  }