View doesn't expand to sides on mobile

[rhysperry111]

When viewing a dashboard with multiple views created on mobile, the view doesn't expand to the screen edges and leaves a small border.

Additionally, the view menu at the bottom is squished and it is hard to access the buttons on either side.

Not entirely sure where to start with debugging this, but happy to help in any way possible.

Device: Pixel 8 Pro Home Assistant: Core 2024.4.3, Frontend 20240404.2 Companion: 2024.4.1-full

[Nerwyn]

Is this on the v2 beta or 1.6.2? It looks like the view left and right padding is being colored in which I remember an issue during development but can't recreate on the latest 1.x and 2.x versions.

The toolbar menu buttons are definitely small. I had reduced them to help make the view buttons text not too cramped but I think I overcorrected. I can increase the size of those.

Because v2 is near ready, I'm going to make any fixes in that branch and not copy them to v1.

[rhysperry111]

This was on v1.6.2, however switching to the beta release I don't think there's any difference (although caching sometimes gets fucky on mobile - but I cleared the app cache and restarted a few times)

[Nerwyn]

Can you try v2 beta 4 and see if it makes a difference?

[rhysperry111]

Just checked and still a no. I can reproduce the bug on the web UI by simulating a mobile screen size in the developer tools. The culprit seems to be:

#view {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

Not sure if it suffices just to remove that or if you'd want to make changes elsewhere.

[Nerwyn]

The left and right padding is to match the padding found in Google Home and similar apps. I could try changing it to margins and see if that fixes it.

Could you go to your themes folder and make sure there is only one folder and file for Material Rounded? I was experimenting with file names during some of the recent development builds which may have caused bad copies to be created.

[rhysperry111]

Yep only one file and folder. If you want to keep the padding there, it should suffice to just make sure to explicitly set the background of #view otherwise the lighter gray "shines through".

[Nerwyn]

I've pushed out a new beta that improves the view padding CSS and adds a more explicit background. Try it now?

[rhysperry111]

Yeah that looks a lot better now. The two buttons in the corner still look squished, especially on devices with rounded corners, but I presume that's a thing to be thought about solving later.

[Nerwyn]

The smaller toolbar menu buttons are a deliberate tradeoff due to the larger view buttons. If left at their default size, the view buttons become too squished in the center if you have more than 5 views. By default the menu buttons size is 48px, and previously I lowered it to 32px. I raised it up a little to 36px due to your feedback, but I don't want to increase it much more.

[Nerwyn]

@rhysperry111 can you try the latest v2 beta (9 at time of writing)? Instead of trying to compromise between the view and menu/actions buttons in the toolbar, I managed to move the menu and action buttons to the top left and right, restore their original size, and make them disappear when not scrolled to the top of a view.

[rhysperry111]

Thanks for trying to make things look a little better. It definitely looks weird on views which don't have any scrolling at all, however I wouldn't stress about it too much.

From a UI/UX perspective it is probably only possible to fix things by changing navigation within the app completely, but I assume that's out of your control.

[Nerwyn]

I went back and forth between adding some padding to the top of the view like a header or letting the buttons float above cards, and went with the latter since users can add a spacer element themselves if they don't want the buttons to float above other elements. I use custom:button-card for section headers and I think it does a great job at separating the menu buttons from the cards.

type: custom:button-card
name: Kitchen, Dining, & Lounge
icon: mdi:sofa
layout: icon_name
styles:
  card:
    - background-color: rgb(0, 0, 0, 0)
    - padding: 4px 20px
  icon:
    - height: 20px
    - width: 32px
    - padding-bottom: 3px
  name:
    - font-weight: 500
    - font-size: 18px
    - text-align: left
  grid:
    - grid-template-columns: min-content min-content

[Nerwyn]

Released v2.0.0. I increased the horizontal padding on the menu and action buttons 4px more from above, so they should be a bit easier to press. At this point they're similar to many Google apps.