Grid Panel scroll bars are not visible and column labels in menu are not aligned

I am having several strange behavior and I am hoping that someone can point me in the right direction. I have searched the forum but I was not successful in identifying a solution.

1) I have a series of primary tab panels and nested tab panels

2) In one of the tab panels I have divided a region into an accordion on the WEST and another tab panel in the CENTER (with 3 additional tab pages nested inside the CENTER region)

3) My grid panel which is contained inside a tab page is initially invisible using the x-hide-display on the div tag

When the data is loaded I click on the tab page that has my grid, the data displayes but the scroll bars are not there

I think it has to do with the components not being able to size themselves properly because they are initially invisible (just a guess). In contrast if I first click on the tab panel that has the grid and then load the data the scroll bar appears. Does anyone know how to fix this?

My second question is regarding the strange alignment of the Colum labels on the menu that gives you the ability to hide or show columns, see image attached. Anyone knows how to fix this?

thanks for the response, but I am not sure I follow you when you say overnest and in this case what should I do? I am confused and its probably based on a lack of fundamental understating about the layouts thus makig the the desgin even more complicated.

1. Do NOT render components inside a layout! Instead, add() them to the layout (or include them in the items).
2. Your layout is completely overnested. Forms and grids can be included directly into a tabpanel or an accordion layout. No need to use an extra panel (for which you also forgot to specify a layout).
3. You obviously have no idea what autoWidth:true and monitorResize:true do, otherwise you wouldn't be using them.