overlapping icons of nested elements

[webian]

Using EXT:gridelements is common to have nested content elements. Unluckily, the edit icons of the childs of a grid container overlap the edit icons of the grid conteiner itself. A partial solution could be to use this less code:

@inline-icons-height: 26px;
.t3-frontend-editing__inline-actions {
    + div .t3-frontend-editing__inline-actions {
        bottom: calc(~"100% - @{inline-icons-height}");
        + div .t3-frontend-editing__inline-actions {
            bottom: calc(~"100% - @{inline-icons-height} * 2");
        }
    }
}

that pushes down the edit icons of the childs as much as their height. It only works on two level of nesting. Btw, it's rare to have more than two nesting levels. Also it works only if the CE are wrapped with a div, but also here is really common that it's this way.

A more elegant solution could be to use javascript to move edit icons of nested CE.

[webian]

I add that, about a javascript solution, it could be better to move up the edit icons of the parent CE instead of moving down the icons of the childs CE so the edit icons will be always outside the CE. Unluckily actually is not possible with CSS, that's why I moved the childs edit icons down.