Some additional info:

• this happens on Safari, haven't tested in other browsers yet
• it appears to happen because of the overflow-x:auto rule on the <div class="table-responsive">. Removing that rule fixes the display of the calendar, but then the table overflows the container.
• The best solution is probably to address the table behavior when it's too wide as horizontal scrolling is not a great UX, especially because it hides the most important column (the add/remove buttons) but that would also be a more involved solution.

This part of how bootstrap functions, apparently:

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Source: https://getbootstrap.com/docs/5.2/content/tables/#responsive-tables

So, unless we decide not to use bootstrap responsive tables, the solution is... impossible? I don't know. Maybe we could put the calendar select in a dialog element (the relatively new native HTML modal)?

However I think this will also be a problem for dropdown fields in subforms, possibly others, so it might be worth looking at in a broader context...

Related #38346

Closing as having a pull request. Please test #39694 . Thanks in advance.

@richard67 probably should reopen. The PR does not address the issue fully as it's more complex than just a line of CSS; see my earlier comments in this issue.

@crystalenka You don’t have a button to reopen your issue when you visit it on GitHub directly and not in the issue tracker?

@richard67 I comment on mobile a lot so don't see it now (and didn't notice from the computer earlier, but could have missed it). Will take a look next time I'm on my computer. Thanks!

@richard67 probably should reopen. The PR does not address the issue fully as it's more complex than just a line of CSS; see my earlier comments in this issue.

@crystalenka yes you are right, it is more complicated than i thought. I think I only have to fix the calendar, but as soon as I fixed the calendar it created another issue of the table overflowing the container.

@crystalenka @richard67 The Field has two "predefined" layouts for displaying the subform as either a table or as a div container, as well as support for custom layouts.

When we have more than 4 fields then subform display as a div container.

And when we have 4 or less than 4 fields then subform display as a table.

"div container" does not cause issue of calendar and it not overflow horizontally. "table" causing the issue of calendar and when we fix the calendar by applying overflow: visible it causes the table to overflow horizontally. So can we remove table layout and make div container layout as a default layout. I am unable to locate a file which has the logic behind when we have 4 or less then 4 field it display as a table otherwise it display as a div container. If this can be a possible solution to this issue can you please help me to find out the file location for this solution.

So can we remove table layout and make div container layout as a default layout.

We should not remove it.
As you found, the fix for the issue is to use default repeatable layout instead of table layout, when there calendar or fancy-select fields in subform.

And this will be possible in 4.3, #38180 added posibility to change layout.
This issue can be closed I guess.