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
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.
Hi @spktk,
this Calendar option is not showing in my localhost
but it's available in my cal.com account
can you tell me how i can get this calendar option.
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:
In a project:
The scrollbar's presence/absence can be affected by:
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
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
My attempts at solving so far:
cal-inline
seemed to make the issue less frequent, but I haven't gotten consistent results.width: auto
forcal-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.height: auto
,overflow: hidden
,box-sizing: border-box
for various elements inside and outside the embed didn't do much of anythingI'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.