Grid-Layout Card rendering blank space below cards

Configuration Frontend
1

Building out a dashboard for wall mounted tablet (fire HD10) using Custom: Layout Card.

I have the layout all built out and the aggregate height of all the cards perfectly matches the pixel height of the tablet. The below screenshot (left) shows how it looks on tablet (perfect at first glance!)

However, there is a good amount of blank space beneath the cards which causes the tablet to enable scrolling (just to reveal blank space). See screenshot (right) below.

I am hoping there is a way to mitigate this issue by either (a) set max dashboard height, (b) locking scrolling functionality (c) other?

I have searched high and low but cannot find a solution anywhere.

(Tablet Screenshots)

Tablet Snapshots
Tablet Snapshots2236×688 123 KB

(YAML)

views:
  - title: Home
    type: custom:grid-layout
    layout:
      grid-template-columns: 66% 34%
      grid-template-rows: auto%
      grid-template-areas: |
        "left right"
      justify-items: stretch
    badges: []
    cards:
2

I think you’re up against one of the basic issues of web design: pages have to be readable on any kind of screen. Generally, content adjusts itself according to the width of the display, not the height (users may hold their phones in portrait mode), and when it comes in cards, as it does in HA, the effects can be unsubtle. In particular unpredictable areas of unwanted space at the bottom.

The developers made a deliberate choice to make the Home Assistant UI mobile first. There’s a blog post about it:

3

Thanks for the response. I find it hard to believe that there is no way to make the bottom of the page align with the bottom of the content / cards.

I visit plenty of websites pages where the bottom of the page is just below the bottom of the content. There must be a way.

I will also look at ways to potentially prevent scrolling in fully kiosk (the program I am running on the tablet).

4

I thought of that too, but I couldn’t see anything.

Have you tried setting the dashboard to panel view? It will only display a single card, so you have to put all your existing cards into a vertical stack. Here’s an example:

image
image1848×930 96.3 KB

Each row in the vertical stack is a horizontal stack with a different number of cards. A bit fiddly, but it guarantees a uniform height because there’s a single object on the screen.