Thin white line left side of screen when hiding menu bar

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;
    }

1 Like

I have the same problem. Android tablets. Fully kiosk browser. Kiosk mode. Just updated to 2023.4.2

kiosk_mode:
  non_admin_settings:
    hide_header: true
    hide_sidebar: true

White line to the left. My OCD can’t cope.

This is now fixed for me in the latest versions of both Kiosk Mode and Wall Panel. Thanks to whoever did this.

and now the white line issue is back again

Try this:

  • Navigate to main Home Assistant page in FK (may need to temporarily change start URL)
  • Go down to your username on the sidebar
  • Look for “Theme” option and select the same theme you are using for your dashboard
  • Go back into FK and put in your old start URL

This fixed it for me. The problem seems to be some kind of device/user-level setting for a default theme for all of HA. Using the default theme gives it a white background which doesn’t work for dark colored dashboards.

Actually this is because when you hide the sidebar from the browser_mod the right border is still visible for some reason.

To get around this just tick the “Always hide the sidebar” in the User Settings of your kiosk instance. This way, after the option to hide the sidebar is set for that user the sidebar will not have any right border.

This also gives you a minimalistic design for when you need to use the sidebar on your kiosk.

That is a 1px wide border on the sidebar. I fixed this by setting the color of it to my background color (black, in my case). To do that, set

mdc-theme-surface: rgba(0,0,0,1)

in the theme, that is activated on the device.

The border will remain (I was not able to remove it in the theme, as there dosn’t seem to be a variable for that) but it will be invisible because the color matches.

This didn’t fix it for me unfortunately, happening in 2024.8