Dashboard title overlapping with menu icon

[ZOXSOCKS]

Checklist:

• [x ] I updated to the latest version available
• [x ] I cleared the cache of my browser

Release with the issue:
2.1.0-beta.003

Browser and Operating System:
Home assistant companion app
Vivaldi (chromium)
Android 14
Pixel 7 Pro
1440 x 3120 resolution

Description of problem:
The title of the dashboard pops under the navigation drawer menu icon on the mobile browser. (And on desktop browser with the window resized to a mobile resolution).

Title of the dashboard also visibly pops under the menu icon on page load.

Page title should sit next to the menu icon, not under it.

screen-20240729-084218.2.mp4

[Nerwyn]

How are you making the dashboard title appear on non subviews? It doesn't appear on any of my lovelace or sections views.

[ZOXSOCKS]

It's taking it from the title of the dashboard. If I change the title, it changes it on the dashboard, and keeps it buried under the menu button.

[Nerwyn]

That's weird. My title's don't appear. Which version of the frontend are you on? Has it always been like this?

[ZOXSOCKS]

I am on the very latest of everything HA. It might be because I'm using the sections layout rather than anything else?

[Nerwyn]

Nope, I'm also using sections view now. Are you sure it isn't caused by another add-on?

[Nerwyn]

I'm not seeing the view title in the view itself in the Home Assistant docs either.
https://www.home-assistant.io/dashboards/sections/

[ZOXSOCKS]

I've figured out the cause of the problem. I have, at present, only one view (and one sub-view which doesn't appear on the nav bar.)

Adding a second view (just named it test for now) moves the 'home' text from the top left and puts it in the bottom nav bar where it belongs. Very odd behaviour!

[Nerwyn]

Ah I see. That's still definitely worth fixing. I'll try to get around to it later today.

[Nerwyn]

I've put out another beta that should fix this. I ended up reworking and further separating our the header and footer styles and adding padding to the top to make it so that the view no longer overlaps with the header. This does make the view much smaller than default, but it's similar to how most material 3 apps are.

TODO - new screenshots

[xvlw]

This solved an issue I had where the chip card was being covered by the hamburger on the left side on mobile devices. I was forced to add a title to my top section in order to force everything down.

Now I can remove that title and everything fits.

Beta working well for me, thank you!

[Nerwyn]

Fixed in 2.1.0