How to style RowEditing plugin

Question

When activating the row editing plugin, the padding is bigger than usual:

Any idea of what can be affecting the layout or how to fix it?

Answer 1

The grid is inside a form definition. It inherited the fieldDefaults, so I had to move them inside the fieldset definition and leave the grid outside of it:

Ext.define('App.view.Test', {
    extend: 'Ext.form.Panel',
    xtype: 'test-form',

    layout: 'vbox',
    bodyPadding: 20,
    fieldDefaults: { //defined here will affect the roweditor plugin
        labelAlign: 'top',
        margin: 20
    },

   items: [
      { 
        xtype: 'fieldset',
        //fieldDefaults should be moved here and leave the grid untouched
        items: [...]
      },
      {
         xtype: 'grid',
         [...]
      }
});

Answer 2

Are you using a custom theme? It looks like the theme variables for rowediting are modified. You can write changing the following variable: $grid-row-editor-padding

Details on how to manage theme variables here: Theming Ext JS. You could also use the Sencha Themer tool.