Sidebar content size

Configuration Frontend
1

Hi, I’m trying to resize a collapsed sidebar’s icons, because it’s just too small on my wall mounted touch screen. So far my best luck was with card mod, creating a custom theme, and selecting that on that instance. Managed to get bigger icons, more space in them, whatever, but couldn’t make the sidebar wider. On a browser, manually changing this variable is ok: --mdc-drawer-width. But I couldn’t adapt this to the config file. Here’s how it looks now:
wall_dashboard.yaml:

wall_dashboard:
  card-mod-theme: wall_dashboard
  card-mod-sidebar-yaml: |
    .: |
      ha-sidebar {
        --mdc-drawer-width: 75px !important;
      }
      ha-md-list-item {
        --md-list-item-one-line-container-height: 60px !important;
        width: 64px !important;
      }

      ha-icon,
      paper-icon-item {
        --mdc-icon-size: 40px;
        --paper-item-min-height: 156px !important;
      }
      .menu,
      .notifications-container {
        display: none !important;
      }
      .profile {
        margin-top: 90px
      }

  card-mod-root-yaml: |
    .: |
      .header {
        display: none;
      }
      hui-view-container {
        padding-top: 0 !important;
      }
  modes: light
    dark

Or is there any better solutions out there? I’m really surprised I couldn’t find any solution regarding this problem

2

card-mod-sidebar-yaml adds the styles inside the shadow-root of the ha-sidebar element, so from the shadow-root of that element you cannot target the element itself using its node name, you need to target it using the :host pseudo class. You would need to change:

ha-sidebar {
  --mdc-drawer-width: 75px !important;
}

by:

:host {
  --mdc-drawer-width: 75px !important;
}

But even doing that, you would need to change the --mdc-drawer-width variable not inside the sidebar but inside its parent (the ha-drawer element), because you also need to change the width of the aside element. But I am afraid that you cannot target that element using card-mod.