How to modify left Sidebar width?

Configuration Frontend
, ,
1

Am I missing something? I’m surprised to be the first to ask this question.

Is there a way to modify the width of the left Sidebar? The wasted real estate is driving me nuts.

2025-01-18 08 50 19

I’m currently using custom-sidebar and card-mod-theme to style the Sidebar.

sidebar-card seemed promising, but unfortunately I found it too unstable.

I have the perfect CSS that I believe would suit my purposes, but (I’d love to be wrong about this) I don’t think even card-mod-theme can inject CSS that high up the element tree.

:host([expanded]) {
    --mdc-drawer-width: calc(200px + env(safe-area-inset-left));
}

Is there a way to inject this with jQuery on page load?

I am open to any suggestions.

2

Why not asking in card-mod-theme thread ?

3

That makes sense!

But wait! Amazingly, I think I stumbled my way into a working solution.

I’m loading the following in a js file as a lovelace resource:

  const style = document.createElement('style');
  style.innerHTML = `
    :host([expanded]) {
        --mdc-drawer-width: calc(200px + env(safe-area-inset-left)) !important;
    }
  `;
  document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.appendChild(style);

I’m still testing it, but so far it doesn’t seem to interfere with the narrow (collapesed) Sidebar, nor with the Sidebar in mobile view.

Stable, too!

1 Like
4

Good mod for people who are not using themes.
(have not tested your solution , will do it in a week)

1 Like
5

By the way, it should be added not as a dashboard resource, but globally as external module.

1 Like
6

Thank you for your encouragement and tips!

I’m still tweaking away at getting it to work the way I want it to in desktop vs mobile mode.

But once I am ready to move on I’ll figure out what you mean by ‘external module’. :+1: