Use breakpoints to define number of columns in section view

[piitaya]

Breaking change

The logic to define columns count can be moved from min and max width to breakpoints logic. As a result, behavior for some theme variables has changed :

• ha-view-sections-column-min-width theme variable will not be used anymore.
• ha-view-sections-column-max-width theme variable is still used when the bigger breakpoint is reached to avoid too large sections.

Proposed change

Caution

Highly experimental
This feature is introduced for testing and should not be used in production dashboard. It can be removed at any time.
Breakpoints can be enabled by setting experimental_breakpoints option to true in the YAML view settings.

experimental_breakpoints: true

Breakpoints are introduced for multiple reason :

1. The number of column could change when expanding or collapsing the sidebar.
2. The "mobile" breakpoint for screen condition (https://www.home-assistant.io/dashboards/cards/#showing-or-hiding-a-card-or-badge-conditionally) was inconsistent with the number of columns on mobile.

Here's the default breakpoints :

Min width	Number of columns	Screen size in visibility condition
0px	1	mobile
768px	2	tablet
1280px	3	desktop
1600px	4
1920px	5
2560px	6

Breakpoints can be customized with the YAML syntax in the view options :

column_breakpoints:
  "0": 1
  "768": 2
  "1280": 3
  "1600": 4
  "1920": 5
  "2560": 6

Demo

Using min and max width of the columns

CleanShot.2024-09-05.at.15.58.05.mp4

Using breakpoints

CleanShot.2024-09-05.at.16.00.00.mp4

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