sidebar very tight in landscape mode on phone

[Mariusthvdb]

never really noticed before, but has the sidebar always been this tight when moving the phone to landscape mode?
it is odd really, as it has way more space, but uses only half...

cutting of many secondary text lines,
will drop in a screenshot when GitHub starts behaving...

[elchininet]

Try with the width property, it has an option to set it only for mobile.

[elchininet]

Made me think: why not have custom-sidebar have some sort of 'auto' width setting, adjusting the sidebar to whichever wist needed to show the items, their secondary text and optional notifications without cutting any of them?

The safe areas have a purpose, they should not be removed. If you want to override them in your side, just use the styles property of custom-sidebar or UI eXtension to override those styles.

[Mariusthvdb]

I didn't mean to remove the safe areas but keep the width and thus move it more to the right, instead of narrowing it

[elchininet]

Safe areas are not present in every device and not with the same values and not even in the same places. Different devices have safe areas of different sizes or they don't have any, so doing something that fits your device will have a totally different effect in another device. It is better to make those customisations on your side, just for your device and adjusting to the level that you need.

[Mariusthvdb]

ok, in that case I would probably needs some assistance...

and 'revert' those changes that were done, because I had none of these issues before, and my iPhone doesnt need them apparently.

besides being very ugly to see that half empty sidebar, also in the screen Missy shared.

I did already change the layout and especially the margin of the badge when expanded to 16px.
I might have to add a negative margin to the whole item? What would be best strategy?

  :host([expanded]) ha-md-list-item > .badge {
    /*position: relative;*/
    transform: translateX(50%);
    max-width: 44px;
    margin: 0 16px 0 0;
  }

  :host(:not([expanded])) ha-md-list-item > .badge {
    font-size: 0.7em;
    transform: translateX(-50%);
    max-width: 30px;
    top: 0px;
  }

I could also try to see if there would be a possibility to make the whole sidebar a bit wider (and have more available space for the secondary line (info)

Id appreciate if you gave me some pointers to try

[elchininet]

ok, in that case I would probably needs some assistance...

I'll debug a bit the code to see what do you need to put there to revert it.

You can also try the width property to see if you can get some extra space.