3 columns in Default view are not same as 3 columns in Sections view

pjannink commented 1 month ago

Checklist

[X] I have updated to the latest available Home Assistant version.
[X] I have cleared the cache of my browser.
[X] I have tried a different browser to see if it is related to my browser.
[X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

A 3 column dashboard is a popular layout for HA. I notice on my wall mounted 9,6 inch iPad with Safari browser that the 3 column homepage in the Default view is shown in 2 columns when recreated in the Sections view: I simply copy-pasted all content from the default dashboard into 6 sections, setuo over 3 columns. However, on the iPad the Sections-page is shown in two columns. Seems that the total pixel width slightly differs looking at the white area between the columns??

Describe the behavior you expected

Sections view being identical to Default view

Steps to reproduce the issue

Create Sections view with 3 columns
Copy content from Default view into sections
...

What version of Home Assistant Core has the issue?

2024.7.3

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Safari

Which operating system are you using to run this browser?

IOS 17.5.2

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

ChristophCaina commented 1 month ago

can you maybe show some screenshots? and / or post the yaml of your dashboards?

pjannink commented 1 month ago

Hi, here they are. I show my regular home page both on laptop and iPad. I copied all content from that homepage into a sections-version (Hometest) and you see on the iPad it only shows 2 columns. HA Sections issue.pdf

pjannink commented 2 weeks ago

Any update??

ChristophCaina commented 2 weeks ago

usually related with the screen width... the sections dashboard will reduce the amount of sections shown side-by-side if the screen resolution does not provide the required width.

You can probably reproduce this on your laptop by simply resizing your browser screen

pjannink commented 1 week ago

Dear Christoph,

I understand that it is related to the screen width. But you will agree with me that:

using 3 columns is rather common in dashboards
an iPad is a popular device for HA dashboards
this issue makes the sections view less useful as replacement for the default view

May be the team can investigate whether the sizing of the columns and white spaces between columns in the sections view can be identical to the default view

pvmil commented 1 week ago

I recognize this same issue, maybe forcing towards 3 columns might be a good solution? (not available as of now as far as I know)

edit: just found this https://github.com/home-assistant/frontend/pull/21141

home-assistant / frontend