css ha-tabs are not overwritten when coming back from a subview

[panhans]

My Home Assistant version: 2023.6.2

My lovelace configuration method (GUI or yaml): yaml

What I am doing: I moved the navbar to the bottom and ha-tabs gets display : flex in order to stretch the tabs to the full width. Now I have a subview that I will enter and going back to the main view.

What I expected to happen: The styling is the same as before.

What happened instead: display: flex seems to be ignored or another style gets applied.

Page refresh helps as a workaround. (hard on mobiles)

Minimal steps to reproduce:

Put this to your themes.yaml:

card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
        width: 97%;
        display: flex;
      }
      paper-icon-button {
        display: none;
      }
    .: |
      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }
      div#view{
        transform: initial;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        padding-bottom: var(--header-height) !important;
      }
      .header {
        top: auto !important;
        bottom: 0; !important
        transform: translate3d(0px, 0px, 0px) !important;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
        -moz-backdrop-filter: blur(50px);
        -o-backdrop-filter: blur(50px);
        -ms-backdrop-filter: blur(50px);
        background-color: var(--contrast0) !important;
      }
      :host([scrolled]) .header {
        box-shadow: none !important;
      }
      .toolbar {
        height: var(--header-height) !important;
        padding: 10px 0px !important;
      }
      #view {
        padding-top: calc(-1 * var(--header-height)) !important;
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
        --mdc-icon-size: 26px;
        display: flex;
        justify-content: space-between !important;
        padding: 20px;
        margin-top:15px;
        height:var(--header-height) !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--header-active-tab-color);
        background-color: var(--header-active-tab-bg-color);
      }
      paper-tab {
        color: var(--header-all-tabs-color);
        border-radius: 17px;
        height:50px;
        padding: 0 20px;
      }

Create a subview, enter and leave it.

By putting an X in the boxes ([]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[BobC76]

Similar issue here - have applied some styles make a more compact calendar entity, ok on page load, but are lost when going to a sub view and back:

card_mod:
  style:
    ha-full-calendar:
      $: |
        #calendar {
          min-height: 400px !important;
          max-height: 600px !important;
        }
        .fc .fc-list-event {
          line-height: 1.3 !important;
        }
        .fc .fc-list-table td, .fc .fc-list-day-cushion {
          padding: 4px 7px !important;
        }