This happens with the kiosk-mode and wall panel plugins from HACS when viewing this in a kiosk browser or normal web browser on iPads and android tablets. Also shows up in Google Chrome on the desktop but harder to see due to the browser. Currently with this URL:
http://foo_server:8123/my-dashboard/foo?wp_enabled=true&wp_hide_toolbar=true&wp_hide_sidebar=true&wp_idle_time=0
If I run it with ?kiosk (for kiosk mode plugin) instead of WP I also get a white bar at the bottom comparable in height to the hidden menu bar from the top. Related?
The top and side bars are pushed out of the way but there’s a thin white line on the left side of the screen. I’ve tried various themes for this tab and none seem to resolve it. Tab is in Panel mode.
How an I get rid of this white line?
Here’s an example of some code I did to try and debug this. The real example will use a Frigate card which has this issue but showing this code to show it is not an issue with the card itself. Panel mode, with 2 column custom layout card. First (left) column the card takes the entire column; second column is a vertical stack card.
type: custom:layout-card
layout_type: custom:grid
aspect_ratio: 100%
height: auto
cards:
- type: custom:weather-card
entity: weather.my_home
number_of_forecasts: '1'
details: false
forecast: false
hourly_forecast: false
- type: vertical-stack
cards:
- type: markdown
content: |
{{ states.sensor.time_2.state }}
{{ state_attr('weather.my_home', 'temperature') }}°
card_mod:
style: |
ha-card {
background: transparent;
font-size: 8.1vw;
text-align: center;
color: var(--secondary-text-color);
line-height: 1.1;
}
- type: custom:weather-card
entity: weather.my_home
number_of_forecasts: '1'
details: false
forecast: false
hourly_forecast: false
card_mod:
style: |
ha-card {
height: 40vh;
background-color: transparent;
}
ha-card div.current {
height: 100%;
width: 100%;
}
ha-card div.current span.temp {
display: none
}
ha-card div.current span.tempc {
display: none
}
ha-card div.current span.icon.bigger {
width: 100%;
height: 100%;
margin-right: unset;
margin-top: -6em;
}
view_layout:
grid-area: main2
layout:
grid-template-columns: 75% 25%
place-content: center
grid-template-areas: |
"main main2"
layout:
max_cols: 2
card_mod:
style: |
ha-card {
background: black;
border-radius: 0;
}