How can I adjust the width of rendered events in the list view

Question

I'm using fullcalendar to display upcoming events in a side bar of my page. That side bar is rather narrow and I'm finding that the events rendered by fullcalendar are overflowing the width of the panel. The panels are created by a bootstrap row/column layout. I've outlined the column divs so you can see their widths. Normally, content inside the column will wrap to stay inside but the events are being set wider.

Here's an example of what I'm getting.

Note how the left column text bleeds into the right column. It appears that the width of the event table cells are getting set with explicit values (calculated in the fc javascript I assume) and I can't figure out how to change it. I just want the event text to wrap within the column div like "normal" content.

Apologies for not including code the first time. I thought it was kind of a generic issue and didn't necessarily need the code. Yes, I've modified the output but again, I didn't think it really mattered. Anyway, here's my configuration.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
  
    var calendar = new Calendar(calendarEl, {
        plugins: [ googleCalendarPlugin, listPlugin ],
        headerToolbar: false,
        initialView: 'list30',
        height: "auto",
        //aspectRatio: 0.5,
        views: {
            list30: {
                type: 'list',
                duration: { days: 30},
                //buttonText: 'Upcoming',
                displayEventTime: true,
                eventContent: function(arg) {
                    let descDiv = document.createElement('div')
                    descDiv.className = 'cust-desc'
                    let locDiv = document.createElement('div')
                    locDiv.className = 'cust-loc'
                    let titleDiv = document.createElement('div')
                    titleDiv.className = 'cust-title'
                
                    let desc = arg.event.extendedProps.description ? arg.event.extendedProps.description : ""
                    let location = arg.event.extendedProps.location ? arg.event.extendedProps.location : ""
                    //descDiv.innerHTML = desc
                    descDiv.innerText = desc
                    locDiv.innerText = location
                    titleDiv.innerHTML = arg.event.title
                    
                    let arrayOfDomNodes = [ titleDiv, locDiv, descDiv ]
                    return { domNodes: arrayOfDomNodes }
                }
            }
        },
        navLinks: false, // can click day/week names to navigate views
        editable: false,
        dayMaxEvents: false, // allow "more" link when too many events
        googleCalendarApiKey: '<myKey',
        events: {
            googleCalendarId: '<myGoogle Calendar>'
        },
        displayEventTime: false,
    });

    calendar.render();
});

Here's the css:

.side-panel {
    background-color: $solid-blue;
}


#calendar {
    max-width: 900px;
    margin: 0 auto;
}   
    
.fc-theme-standard .fc-list-day-cushion {
    background-color: white;
}       
        
.fc-theme-standard .fc-list {
    border: 0px;
}         
        
.fc .fc-scroller-liquid {
    height: 100% ;
}         
    
.fc .fc-list-event-graphic {
    display: none;
}         

.fc .fc-list-event-time {
    display: none;
}
.fc .fc-list-event:hover td {
    background-color: transparent;
}
.cust-title {
    font-weight: bold;
    padding-bottom: 5px;
    font-size: 16px;
}         

.cust-loc {
    padding-bottom: 5px;
    font-size: 16px;
}         

.cust-desc {
    padding-bottom: 5px;
    font-size: 16px;
    width: 250px;
}         
@media screen and (max-width: 1400px) {
    .cust-desc {
        width: 200px;
    }    
}

@media screen and (max-width: 1150px) {
    .cust-desc {
        width: 180px;
    }    
}

@media screen and (max-width: 800px) {
    .cust-desc {
        width: 100px;
    }    
}

@media screen and (max-width: 600px) {
    .cust-desc {
        width: 250px;
    }    
}

Here's the html:

  <body>
    <div class="container">
      <div class="row">
        <div class="col-3 border border-danger bg-light">
          This is the first column
          <div id='calendar'></div>
        </div>
        <div class="col-9 border border-success bg-info">
          This is the second column kkk
        </div>
      </div>

    </div>
    <div>This is after the calendar</div>
  </body>

I've solved this with the media queries in the style sheet which explicitly sets the width on the event description div at various screen widths.

This works but seems "wrong" to have to do. I would have thought the content would have been contained in the event "containers" and not given a specific, calculated width that I I have to override.

Hope this helps clarify. I'm sorry, I don't post to Stack Overflow very much so if I've not followed the procedures I apologize.