.page-default-container {
    display: flex;
    flex-direction:column;
    height: 100%;
    width: 100%;
    position:relative;
}

.base-grid-wrapper:has(> .sf-grid),
.base-grid-wrapper:has(> .sf-treegrid) {
    flex: 1;
    height: 100%;
    width: 100%;
}

/*I have no idea why this works but essentially without this, the pagination bar at the bottom which would also include the horizontal scrollbar for when you want to see more columns is hidden on resizing the screen (any value below 77% can work)*/
.header-info-grid-with-search.search-height-no-header ~ div:has(> .sf-grid),
.header-info-grid-with-search.search-height-no-header ~ div:has(> .sf-treegrid) {
    height: calc(100% - 95px);
    flex: 1;
}

.header-info-grid-with-search.search-height-no-header.hide ~ div:has(> .sf-grid),
.header-info-grid-with-search.search-height-no-header.hide ~ div:has(> .sf-treegrid) {
    height: 100%;
    flex: 1;
}