bug: Grid operation resulting in a changed grid size (e.g. added scrollbar) can make items extend past the grid or have empty grid areas about angular-grid-layout

[llorenspujol]

Thanks for reporting @Achilles1515 .

About 'resizing' and width changes etc, this grid solution it not intended to 'resize' by itself. It is a design decision. We took this decision because this grid is meant to be used in dashboards. Dashboards have charts & those charts may be resized manually too and may be costly to render in some cases, so we want the lib user to handle it manually the way he wants.

For example, the second bug you posted, the solution would be resize manually, example: https://stackblitz.com/edit/angular-grid-layout-playground-enzrrp?file=src/app/playground/playground.component.ts

About the first one (the scrollbar appearing), it is something that is annoying me for some time, I don't like it to behave like that, but sincerely for now I don't have a solid solution for it. The main objective would be the scrollbar to not take space, because we would avoid unnecessary resizes on the grid and on it's items. But this feature of 'scrollbar to not take space' seems not well supported too. There is obviously the overflow: overlay but is not standarized in all browsers. There is also a workaround that could be done if the grid is placed taking all viewport width, using 'vw' units, that doesn't take into account the scrollbar, see: https://stackblitz.com/edit/angular-grid-layout-playground-kxbcji?file=src/app/playground/playground.component.scss

Another thing that could be done is: - The lib user could detect if scrollbar appears, if so, he resizes manually. But for now, resizing manually while performing a drag operation is not supported. We should add support for resizing while performing a drag operation to allowing this feature.

I am open to suggestions and other solutions if you have, would be nice to solve this cleanly.