How to align the menu on the left side just like on the Editor.js homepage?

[PhilBookst]

My menu is sitting on the right side of the editor but it'd like it to be on the left side just like on the homepage.

desired position:

how it currently is:

I can't seem to find anything related in the docs, is there any prop that I'm missing?

Thanks for your help!

[PhilBookst]

Nevermind, the menu moves to the left if the editor has a specific width

[KevinBeckers]

Struggling with the same issue. Which size did you encounter the breakpoint?

[PhilBookst]

At around 680-700px it changes to the left side

[gxanshu]

and how to do it opposite ?
i want that menu bar on the right side in 680-700px

[alexanderritik]

use this css class and tailwind

@media (min-width: 651px) {
.ce-block__content, .ce-toolbar__content {
max-width: calc(100% - 120px) !important;
margin: 0 60px;
}
}

.cdx-block {
max-width: 100% !important;
}
It solves the fix width issues

[simchor]

This is what i did for both the toolbar to expand on the left side but expanding on the right side if that can help.

@media (min-width: 651px) {
.ce-block__content {
max-width: calc(100% - 120px) !important;
margin: 0 60px;
}
}

@media (min-width: 651px) {
.ce-toolbar__content {
width: 0px !important;
margin: 0 50px;
}
}

.cdx-block {
max-width: 100% !important;
}

@media (min-width: 651px) {
.codex-editor--narrow .ce-toolbox .ce-popover {
left: 0;
right: 0;
}
}

@media (min-width: 651px) {
.codex-editor--narrow .ce-settings .ce-popover {
right: 0;
left: 0;
}
}

This is what personnaly did and it works in full screen mode

[paulkahura]

You can adjust based on your use case but changing both of this works great

:host ::ng-deep .ce-toolbar__content, .ce-block__content {
margin: 0 80px!important;
max-width: none!important;
}

[droid001]

I found it easiest by overriding the toolbar__actions right position:

.ce-toolbar__actions {
    right: 100%; /* Place to the right, 100% of the container's width */
}