[Escalated to 2nd Tier] padding on grid cell breaks backend layout

[Author]

Posts

[nicholasM]

STEPS TO REPRODUCE ON 2022 theme:
- Insert a grid block onto a page and select 3 columns (doesn't matter the amount).
- Now give each gridcell a 1px border so you can clearly see it.
- add a paragraph inside each grid cell
- now add say 50px left and right padding to each cell.
- admire your complete MESS of a broken overflowing overlapping layout.

This is really bad this still happens I'm hoping fixing like this are still being made to blocks

[Minesh]

Hello. Thank you for contacting the Toolset support.

Just wanted to confirm again that yes, I followed the steps you shared and as per the ticket title it breaks the admin layout but on frontend its working fine I can see having said that on frontend there is no issue - correct?

[nicholasM]

correct the front end is fine, but with a lot of content in the columns and significant padding my client has trouble even clicking on the right column, it looks Very unprofessional I hope this can be addressed.

[nicholasM]

you simply need to apply box-sizing: border-box; to the grid columns. I fixed this in my theme by adding the following to my editor-styles

.tb-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
box-sizing: border-box;
}

[Minesh]

Thank you for sharing all information and even workaround that should work for now, that should help other users that might face the same issue.

I can confirm that I can see the issue and I've escalated it to next level support. I'll get in touch with you as soon as I've any update on it. Please stand by.