material-rounded-theme
material-rounded-theme copied to clipboard
Nerwyn
The navigation bar shrinks after using navigate in lovelace.
Latest version 1.6 installed, but was an issue with older versions, too.
I'm using the navigate function to other lovelace pages on some chip or mushroom cards and whenever I go back the navigation bar on the bottoms shrinks horizontally as shown in the video. https://github.com/Nerwyn/material-rounded-theme/assets/98790344/a615f87c-46da-4ca4-985d-3bb8c94b574f
The problem shows on Chrome on Mac, Home Assistant App on Mac, Chrome on Android and Home Assistant app on Android.
Are you on the latest version of card-mod? Card-mod styles not fully applying to the toolbar was an issue before version 3.4.0 but I thought it was fixed.
Yes, 3.4.3 is installed over here. Should I try downgrading to 3.4.0?
The bar looks correct initially but shrinks whenever navigate is used...
That's weird, I can't recreate it on any of my devices. Downgrading shouldn't be necessary since I'm also on 3.4.3.
I do see the toolbar tabs briefly left aligned before card-mod fully applies. Maybe card-mod isn't reapplying on page load for some reason? Do you have card-mod installed as a frontend module?
I just set card-mod as a ressource now but I don't see any difference in behaviour. Checked ressources to make sure.
Just checked Safari. On Safari it goes back to full width again after almost one second.
Found a workaround for Chrome and Home Assistant apps. If I don't use the navigation to go back at the bottom (as shown in video) but rather the browser ui or phone gestures to navigate, the navigation bar will be fine.
I started intermittently running into this issue too. I think it's because card-mod is making so many style changes that they're not all applying consistently. I still have some ideas for how I might be able to mitigate this with refactors but no promises that it'll actually work.
Bad news - the idea didn't work. I'm not sure there's a fix to this unless card-mod's performance is improved.
Thinking of making these subviews regular again or putting on another dashboard instead, which also fixes the issue.
I personally stopped using sub views due to load time issues on low end devices and switched to browser mod popup cards. Using some additional card-mod styling I have some really nice hidden cards that load with the rest of the page for seamless opening and are easy to exit out of by tapping outside of them.
Tried the latest beta, refreshed but it still shrinks after using subviews sadly
The big problem is that the entire ha-tabs/paper-tabs element gets unloaded in subviews, which causes the card-mod CSS to unload. I don't think there's a way around this without a fix to card-mod itself. The root styles do get reapplied but the shadow-root styles do not.
Is this issue linked to this (Bottom bar not loaded properly) ? Reloading fix the problem but it keeps appearing uncentered randomly.
Yup. Is that after viewing a sub view? It's a card mod issue where styles within a shadow-root are lost when an element unloads. I don't think there's anything I can do about it.
Edit: I may be able to set the paper-tab styles outside of the shadow-root instead.
@deezid @Jejebond can y'all try the latest v2 beta (~~10~~ 11 at time of writing). I did some out of the box thinking (the box being the ha-tabs, paper-tabs, and paper-tab shadow-roots that weren't loading their styles properly 😁) and managed to create very similar styles for the view tabs without the shadow-roots. They seem to be applying correctly after leaving a subview, load faster, and I imagine shouldn't fail to load anymore due to shadow-root style slowness.
@Nerwyn I'll try this out during 24h just to make sure and give you feeback tomorrow. For now on, it seems to be working.
Note - Subviews must be placed as the last view tabs on the toolbar for the view tab size calculation to be correct, otherwise they won't be skipped when counting view tabs.
Latest version indeed seems to have it fixed. Also way less jumpiness when loading the dashboard the very first time 😀
It only happen once to me but it's much more stable ! Is it normal that the menu and 3 dot buttons are up now ? (i'm fin with this look, much better).
The fact that it happened once is concerning but I'm hoping that was a cache issue 🙃.
The menu buttons at the top is the new normal! They've been moved to better follow the material design 3 guidelines and give more room for view tabs. These buttons are part of the top app bar and should be separate from the navigation bar. I didn't want to take even more room away from the view window so I made them overlays that disappear on scroll. Users can opt to create their own top app bar using something like markdown card or button-card if they don't want them to overlay, kind of like I do in the updated screenshots.