containerRef div shouldnt affect styling

[joaopaulo-capy]

Currently the calendar is being rendered wrapped in a div that the sole intent, as i understand, is to wrap a ref arround it.
Considering this and that there are no props to style that div, it should have the display contents property to not affect styling. In some very specific cases it can create issues, for example in the print below, there is a little gap under the calendar*

*Maybe if i used height 100% in the calendar style it would fix it, however it could introduce other issues in the way i want the style to behave.

With a flex parent:

[pullrequest]

✅ This pull request was sent to the PullRequest network.

---

@joaopaulo-capy you can click here to see the review status or cancel the code review job.

[pullrequest]

PullRequest Breakdown

Reviewable lines of change

+ 1
- 1

100% JavaScript

Type of change

Minor Update - These changes appear to be a minor update to existing functionality and features.

[pullrequest]

I don't have any concerns with this change.

Graham C

---

Reviewed with ❤️ by PullRequest

[pullrequest]

Thank you for the screenshot and description!

Steven S

---

Reviewed with ❤️ by PullRequest

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (e2c7d2c) 95.24% compared to head (f1cff78) 95.24%.
Report is 6 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4384   +/-   ##
=======================================
  Coverage   95.24%   95.24%           
=======================================
  Files          28       28           
  Lines        2479     2479           
  Branches     1020     1020           
=======================================
  Hits         2361     2361           
  Misses        118      118           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sebastienbarre]

@joaopaulo-capy -- This definitely had unfortunate negative side effects on inline calendars that I don't know how to fix.

Before:

After (because of display: 'contents'):

[joaopaulo-capy]

Im sure this can be fixed easily. What kind of container is your inline calendar? Does your calendar have any styling? and is the expected behaviour your first print?

Here are some experiments:

My datepicker from the original post is also inline and just works

However if i set a width to the container (in this example 100% width), your bug is reproduced

This is kind of expected considering the month container is not responsive

Here is month container with 100% width (still not the best solution because the day grid is not responsive and it would be hard to make it responsive, considering we would need to calculate the font-size responsively)

Does wrapping your calendar arround a container (without any width style) fix your problem?

[sebastienbarre]

Yes, wrapping in a div does fix it, but this is still a breaking behavior for everybody else, right? You would need people who have an inline calendar to fix it too, as opposed to use display: contents only when the inline prop is not true in the first place. Thanks.