My simple (but not perfect) solution for the broken buttons alignment

[senabo]

reference to the closed issue #12

I've created a custom mixin with override styles for object-tools block (extra buttons are rendering there)

class CustomExtraButtonsMixin(ExtraButtonsMixin):
    """
    Extra buttons mixin with buttons layout fix.
    """
    class Media:
        css = {
            'all': ('css/admin/extra-buttons/buttons-layout.css',)
        }

and buttons-layout.css:

.object-tools {
    font-size: 0.625rem;
    font-weight: bold;
    /* Disable default styles */
    padding-left: 0;
    float: none;
    position: unset;
    margin-top: 0;

    /* Custom styles to fix layout */
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 16px;
    gap: 16px;
    justify-content: flex-start;
}

@media (max-width: 767px) {
    .object-tools li + li {
        margin-left: 0!important;
    }
}

Result:

and responsive:

Originally posted by @senabo in #12 (comment)