Allow edit card dialog to be made wider

[cnorick]

Breaking change

Proposed change

To make more space for code-editing card dialogs (e.g. markdown or custom html cards), now you can click the title of the card to expand the width to fill the screen on desktop. This is similar to expanding the more info dialog.

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 Wider card code editor / Wide mode for card code editor #5191
• This PR is related to issue:
• 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

[homeassistant]

Hi @cnorick,

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

[zsarnett]

Please add a screenshot of how this looks

[spacegaier]

Holy cow! Never knew that clicking on the title makes a card go wider. That is not easily clear for the user. Perhaps a pointer cursor should be shown when hovering?

[noxhirsch]

I think a pointer cursor is not clear enough. Maybe there should be a button in the header to make it wider? (the title could still be clickable for users that know that trick). mdi:arrow-expand-horizontal seems to be perfect for that.

[spacegaier]

Just an observation: Some dialogs already contain three icons in the header, so a fourth one might start to clutter up things a bit. I thought for a second to propose only showing this new icon if the title is hovered, but that would only increase the visibility a bit plus in the worst case make the dialog box size jump.

Example with three buttons (counting the close button).

So perhaps we only show the proposed icon in some places, such as the code editors you mentioned.

[zsarnett]

We should not have multiple ways to achieve this in different dialogs. Clicking the header is the best way for now unless we refactor all of our dialogs

[cnorick]

I agree @zsarnett. I think consistency is more important than discoverability here. However, I like the idea of making resize more discoverable on all dialogs. Maybe we can turn that into another feature request?