[QUESTIONS] Move panel to the left

Hi grapesjs team,

I am trying to move BlockManager, StyleManager, TraitManager etc to the left. I have tried to use appendTo but I don't know why the default panel still shows up.

Is it to possible to move all things within the right sidebar to the left?. Or append them to the new html element and remove the default one.

<div class="row">
    <div class="column" style="flex-basis: 300px; background: #463a3c; color: #fff; text-align: center">
      Block Manager
      <div id="blocks" class="column"></div>

      Style Manager
      ...
    </div>

    <div class="column" style="flex-basis: calc(100% - 300px)">
      <div id="canvas" style="height:0px; overflow:hidden">
      </div>
    </div>
  </div>

var editor = grapesjs.init({
  blockManager: {
        appendTo: '#blocks'
      },
      styleManager: {
        appendTo: '#style-manager-container'
      },
      selectorManager: {
        appendTo: '#selectors-container',
      },
      traitManager: {
        appendTo: '#traits-container',
      },
})

Sorry @artf if my question is too basic, but I have been digging to the docs and couldn't find any clue.

Updated I found a way to remove the default panel by giving an empty array to the value of defaults property

panels: {
  defaults: []
},

But it's just removing the panel, not the layout. It looks like this.

I managed to remove the brown layout using CSS.

.gjs-cv-canvas {
  /* remove the right gap */
  width: 100%;

  /* remove the top gap */
  height: 100%;
  top: 0
}

I am still wondering whether I am doing it right or not. Please enlighten me