Media Library Picker - infinite scroll and text overlay issues

Topics: Core, Customizing Orchard, Troubleshooting
Jan 13, 2014 at 11:51 AM
Edited Jan 13, 2014 at 12:01 PM
So I earlier had issues when the text overlay would not show properly but then noticed that it was due to media queries for resolutions below ~1400px. So I updated orchard-medialibrar-admin.css with below:
@media (max-width: 1419px) { 
    #media-library-main-list li, #media-library-main-list .media-thumbnail {
        width: 120px;
        height: 120px;
    }

    #media-library-main-list li img, .dragged-selection img {
        width: 120px;
        height: 120px;
    }

    .media-library-main-list-overlay {
        /*display: none;
        */
        top: 85px;
        font-size: 11px;
    }
}
 
@media (max-width: 1190px) { 
    #media-library-main-list li, #media-library-main-list .media-thumbnail {
        width: 80px;
        height: 80px;
    }

    #media-library-main-list li img, .dragged-selection img{
        width: 80px;
        height: 80px;
    }

    .media-library-main-list-overlay {
        /*display: none;
        */
        top: 40px;
        font-size: 10px;
    }
}
Now, my issue is that the infinite scroll to display more items does not work anymore. The worst part is that it seems to be affected by the text overlay. See both screenshots below to see items with no overlays having the scroll, and items without the overlay having no scroll:

Overlay, no scroll
Image

No overlay, has scroll
Image

Any ideas? Having no scroll is a huge issue as it doesn't render a complete list of items.