Add two pane view to calendar panel

[bramkragten]

Proposed change

Intoduces a two pane view, that turns into a 1 pane view on narrow screens:

On mobile the header becomes a drop down menu that allows to pick the calendars that you want to show:

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[piitaya]

I noticed 2 things.

The lines are not aligned in some screen sizes. Also, do we really need this line in the top bar? 😅

On mobile, does the dropdown needs to be closed on each checkbox click?

CleanShot.2023-10-23.at.11.40.06.mp4

[bramkragten]

Also, do we really need this line in the top bar?

Yes, I think we do, especially if we are going to move controls to the right side of the top bar

[steverep]

FYI, this introduced a duplicate of @lit/reactive-element (bumping it to the next major version).

[steverep]

Adjusted in #18484