Search code examples
webstormjetbrains-ide

How to change sidebar height and tab height manually in JetBrains WebStorm

I just recently found out that JetBrains released the 2021 version of WebStorm so I update it and it changed my entire UI because Material UI is not free anymore but at anyhow I managed it but I got a problem with the height of my left sidebar and editor tabs.

Editor tabs become too small in height and width and don't show the full name of the file sometimes ( see package.json and .eslintrc in image ) and the left sidebar looks like all things are much much together.

Please help me to change the height of the editor tabs and sidebar or How to get Material Theme UI for free 😅

WebStorm 2020

enter image description here

WebStorm 2021

enter image description here

Solution

  • I noticed that after installing v2020, You can change the Editor Tabs height with the help of Material Theme UI and also change the sidebar height

    That's why after uninstalling Material Theme UI I got a problem of scaling

    Editor Tabs Height Setting

    Appearance & Behavior > Material Theme > Tabs > Tabs Height

    Sidebar Height Setting

    Appearance & Behavior > Material Theme > Project View > Custom Sidebar Height

    So thats why I downgrade the version of the Material Theme UI to 5.7.0 and my all problem is solved.

    You can download it from https://plugins.jetbrains.com/plugin/download?rel=true&updateId=109027

    1. Download the zip
2. Open plugins from settings and click on 3 vertical dots near to `Installed` and then click on `install plugin from disk`.
3. Select above downloaded zip
4. Enjoy

    Github: https://github.com/ChrisRM/material-theme-jetbrains/issues/1718