Admin : change space occupation on left panel


As you can see on this screenshot, the space allowed to collection types is small compared to the whole available height and other sections

Is there a way to dock on bottom sections “General” “Plugins” “Single types” and define “Collection types” height to occupy 100% of the remaining space?

For my project I have about 25 collection types and always have to scroll or search

1 Like

@soupette @HichamELBSI I forget exactly where the file was to apply this change at a per project level.

@maeva @Aurelsicoko Now that we are starting to remove some stuff from the left menu and placing it into settings, I think it might be good to at least expand this.

1 Like

We do have a better UX solution in our mind, but until we integrate the new design, we could definitely increase the height of the CT & ST section in the left menu! @Jab


Hello @JGallapont,

In order to increase the left menu sections, you just need to customize the LeftMenuListLink file max-height. (Doc: Customize the admin panel)
In the example below, I will show you how to customize the max-height of the collection types section.

1 - Copy the entire content of this file : LeftMenuLinkSection

2 - Create a new file in your project and paste the content of the github file in: your_project/admin/src/components/LeftMenu/LeftMenuLinkSection/index.js

3 - Replace the line 38 with this line :
<LeftMenuListLink section={section} shrink={shrink}>

4 - Copy the entire content of this file : LeftMenuListLink

5 - Create a new file in your project and paste the content of the github file in: your_project/admin/src/components/LeftMenu/LeftMenuLinkSection/LeftMenuListLink.js

6 - Replace the line 4 with this line:
max-height: ${({ section }) => (section === 'collectionType' ? '400px' : '180px')};

  • The 400px max-height value is just an example.
  • You can remove this condition if you want to increase all menu sections.

Hope this helps.

1 Like

Thanks for the detailed instructions. I agree that max-height: 180px is a ridiculously small area and really needs to be increased (or removed altogether). I just wish your solution worked…

Unfortunately, the “admin/…” path you (and the docs) mentioned does not exist in my project root folder. There is “.cache/admin/…” with the same files, which I updated instead. However, this did not work.

I also tried creating the “admin/src/components/LeftMenu/LeftMenuLinkSection/” folder myself, but again, adding the updated files to this directory changes nothing on the frontend.

What am I doing wrong and how can I change this style rule?

You have to create the path, this system works similar to the React ejection system.