I am using Grafana inside Home Assistant, version 12.1.0 (not sure if that tracks to standalone versions), and am trying to get dashboards that look good on PC’s (nice wide, lots of pixels) and also on my TV browser so Home Assistant can put them up.
As an example, one of many, I have an energy usage dashboard similar to the following. It used to be two rows, but those were un-readably small on the TV (really not the size but the panel’s scale screwed up the readability). Despite being square on the PC these end up elongated vertically on the TV.
What I want to do is make this more responsive, have each row contain a different number of panels. The line graphs below it are fine, they scale nicely (there are several if scrolled down). It’s these dials that are an issue. In their settings I do not see any obvious layout control (except horizontal/vertical).
Or… I’m open to suggestions how to best approach this. The TV display has enough pixels it does not fall into single column mobile mode.
Is the best answer two different dashboards?
I have not tried CSS, is the answer media queries in CSS to try to alter actual pixel size (that seems destined to conflict with what grafana is itself doing).
Also, can I dynamically hide the time selection, dashboard breadcrumbs, etc. on the TV (but not the PC)? I could pass different things in the URI to reach the dashboard from the automation if it’s not easy to find the window pixel dimensions, if that helps.
