Grid component: Pagination, items selection, and items per page, in small screens

[tetexxr]

When using Grid component in small screens, the pagination, the items per page selection, and the total items label, they are not well laid out and become illegible.

To reproduce this behaviour, the example page can be used: https://demos.blazorbootstrap.com/grid/paging Resizing the screen is very clear.

[gvreddy04]

@tetexxr Thank you for your feedback. We will adress this in the upcoming release.

[tetexxr]

Thanks to you @gvreddy04 for the great work you have done. As a workaround, I've added a style that more or less solves the problem, in case it can give you an idea of a possible solution:

@media (max-width: 1000px) {
    .table-fix-pagination + div {
        flex-direction: column;
    }

    .table-fix-pagination + div .justify-content-center {
        justify-content: unset !important;
        margin-bottom: 0.5rem;
    }
}

And in the Grid component, add this:

GridContainerClass="table-fix-pagination"