Embed graphical bug: Empty scrollbar track rendering unpredictably when there's no overflow

Issue Summary

The inline embed component has been unpredictably rendering a scrollbar track without a thumb when there is no overflow.

Steps to Reproduce

On app.cal.com:

Chrome window size 1680x904 zoom 100%
Go to app.cal.com/event-types
Event Type > ellipsis button > 'Embed' > 'Inline Embed'
The issue should be visible

In a project:

Embed the Cal React component
Render
The issue should be visible

The scrollbar's presence/absence can be affected by:

Changing zoom in the browser window
Changing the 'width' field in the app.cal.com customization screen
Width and padding properties in CSS
Resizing the browser window
Causing the Cal component to re-render

The issue seems to be the same in monthly, weekly, and column view.

Actual Results

The scrollbar track is visible once the component renders.

Expected Results

The scrollbar track should not render if there is no overflow

Technical details

Chrome Version 126.0.6478.127 (Official Build) (x86_64)
macOS Sonoma 14.4.1 (23E224)
Macbook Pro A1989
Cal.com v.4.3.0-h-c8b577f

The calendar that Cal pulls from is self-hosted in a CalDAV server, and I've only tested this on my account, so latency might be relevant.

Evidence

Screenshot of app.cal.com embed screen with issue

My attempts at solving so far:

Adding padding to cal-inline seemed to make the issue less frequent, but I haven't gotten consistent results.
Setting width: auto for cal-inline and .cal-embed also seems to help but the embed ends up being very skinny rather than filling its container element which isn't desired.
Setting height: auto, overflow: hidden, box-sizing: border-box for various elements inside and outside the embed didn't do much of anything

I'm not the most experienced with CSS styling or React components so maybe I'm missing something obvious, but this seems to be a deeper issue with the component's structure.

calcom / cal.com