@internetarchive/collection-browser 0.4.18 → 0.4.20

package/dist/src/collection-browser.js

@@ -16,6 +16,7 @@ import { RestorationStateHandler, } from './restoration-state-handler';
 import chevronIcon from './assets/img/icons/chevron';
 import './empty-placeholder';
 import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
+import { srOnlyStyle } from './styles/sr-only';
 let CollectionBrowser = class CollectionBrowser extends LitElement {
     constructor() {
         super(...arguments);
@@ -249,7 +250,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         class="column${this.isResizeToMobile ? ' preload' : ''}"
       >
         <div id="mobile-header-container">
-          ${this.mobileView ? this.mobileFacetsTemplate : nothing}
+          ${this.mobileView
+            ? this.mobileFacetsTemplate
+            : html `<h2 id="facets-header" class="sr-only">Filters</h2>`}
           <div id="results-total">
             <span id="big-results-count">
               ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
@@ -259,15 +262,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             </span>
           </div>
         </div>
-        <div
-          id="facets-container"
-          class=${!this.mobileView || this.mobileFacetsVisible
-            ? 'expanded'
-            : ''}
-        >
-          ${this.facetsTemplate}
-          <div id="facets-scroll-sentinel"></div>
-        </div>
+        ${this.mobileView
+            ? nothing
+            : html `<div id="facets-container" aria-labelledby="facets-header">
+              ${this.facetsTemplate}
+              <div id="facets-scroll-sentinel"></div>
+            </div>`}
         ${this.mobileView ? nothing : html `<div id="facets-bottom-fade"></div>`}
       </div>
       <div id="right-column" class="column">
@@ -282,6 +282,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         return html `<infinite-scroller
       class=${this.infiniteScrollerClasses}
       itemCount=${this.placeholderType ? 0 : nothing}
+      ariaLandmarkLabel="Search results"
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
@@ -425,27 +426,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.selectedTitleFilter = null;
         this.selectedCreatorFilter = e.detail.selectedLetter;
     }
+    /**
+     * The full template for how the facets should be structured in mobile view,
+     * including the collapsible container (with header) and the facets themselves.
+     */
     get mobileFacetsTemplate() {
-        return html `
-      <div id="mobile-filter-collapse">
-        <h1
-          @click=${() => {
-            this.isResizeToMobile = false;
-            this.mobileFacetsVisible = !this.mobileFacetsVisible;
-        }}
-          @keyup=${() => {
+        const toggleFacetsVisible = () => {
             this.isResizeToMobile = false;
             this.mobileFacetsVisible = !this.mobileFacetsVisible;
-        }}
-        >
-          <span class="collapser ${this.mobileFacetsVisible ? 'open' : ''}">
-            ${chevronIcon}
-          </span>
-          Filters
-        </h1>
-      </div>
+        };
+        return html `
+      <details
+        id="mobile-filter-collapse"
+        @click=${toggleFacetsVisible}
+        @keyup=${toggleFacetsVisible}
+      >
+        <summary>
+          <span class="collapser-icon">${chevronIcon}</span>
+          <h2>Filters</h2>
+        </summary>
+        ${this.facetsTemplate}
+      </details>
     `;
     }
+    /**
+     * The template for the facets component alone, without any surrounding wrappers.
+     */
     get facetsTemplate() {
         return html `
       <collection-facets
@@ -711,7 +717,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.dispatchEvent(event);
     }
     async handleQueryChange() {
-        var _a;
         // only reset if the query has actually changed
         if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)
             return;
@@ -722,11 +727,17 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.fullYearsHistogramAggregation = undefined;
         this.pageFetchesInProgress = {};
         this.endOfDataReached = false;
-        this.pagesToRender = this.initialPageNumber;
+        this.pagesToRender =
+            this.initialPageNumber === 1
+                ? 2 // First two pages are batched into one request when starting from page 1
+                : this.initialPageNumber;
         this.queryErrorMessage = undefined;
         // Reset the infinite scroller's item count, so that it
         // shows tile placeholders until the new query's results load in
-        (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.reload();
+        if (this.infiniteScroller) {
+            this.infiniteScroller.itemCount = this.estimatedTileCount;
+            this.infiniteScroller.reload();
+        }
         if (!this.initialQueryChangeHappened && this.initialPageNumber > 1) {
             this.scrollToPage(this.initialPageNumber);
         }
@@ -791,7 +802,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     }
     async doInitialPageFetch() {
         this.searchResultsLoading = true;
-        await this.fetchPage(this.initialPageNumber);
+        // Try to batch 2 initial page requests when possible
+        await this.fetchPage(this.initialPageNumber, 2);
         this.searchResultsLoading = false;
     }
     emitSearchResultsLoadingChanged() {
@@ -1048,7 +1060,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     get facetFetchQueryKey() {
         return `${this.fullQuery}-${this.searchType}`;
     }
-    async fetchPage(pageNumber) {
+    /**
+     * Fetches one or more pages of results and updates the data source.
+     *
+     * @param pageNumber The page number to fetch
+     * @param numInitialPages If this is an initial page fetch (`pageNumber = 1`),
+     *  specifies how many pages to batch together in one request. Ignored
+     *  if `pageNumber != 1`, defaulting to a single page.
+     */
+    async fetchPage(pageNumber, numInitialPages = 1) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
         if (!trimmedQuery)
@@ -1060,18 +1080,24 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             return;
         if (this.endOfDataReached)
             return;
+        // Batch multiple initial page requests together if needed (e.g., can request
+        // pages 1 and 2 together in a single request).
+        const numPages = pageNumber === 1 ? numInitialPages : 1;
+        const numRows = this.pageSize * numPages;
         // if a fetch is already in progress for this query and page, don't fetch again
         const { pageFetchQueryKey } = this;
         const pageFetches = (_b = this.pageFetchesInProgress[pageFetchQueryKey]) !== null && _b !== void 0 ? _b : new Set();
         if (pageFetches.has(pageNumber))
             return;
-        pageFetches.add(pageNumber);
+        for (let i = 0; i < numPages; i += 1) {
+            pageFetches.add(pageNumber + i);
+        }
         this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
         const sortParams = this.sortParam ? [this.sortParam] : [];
         const params = {
             query: trimmedQuery,
             page: pageNumber,
-            rows: this.pageSize,
+            rows: numRows,
             sort: sortParams,
             filters: this.filterMap,
             aggregations: { omit: true },
@@ -1094,20 +1120,28 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
                 (_g = (_f = window === null || window === void 0 ? void 0 : window.Sentry) === null || _f === void 0 ? void 0 : _f.captureMessage) === null || _g === void 0 ? void 0 : _g.call(_f, this.queryErrorMessage, 'error');
             }
-            (_h = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _h === void 0 ? void 0 : _h.delete(pageNumber);
+            for (let i = 0; i < numPages; i += 1) {
+                (_h = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _h === void 0 ? void 0 : _h.delete(pageNumber + i);
+            }
             this.searchResultsLoading = false;
             return;
         }
         this.totalResults = success.response.totalResults;
         const { results, collectionTitles } = success.response;
         if (results && results.length > 0) {
+            // Load any collection titles present on the response into the cache,
+            // or queue up preload fetches for them if none were present.
             if (collectionTitles) {
                 (_j = this.collectionNameCache) === null || _j === void 0 ? void 0 : _j.addKnownTitles(collectionTitles);
             }
             else {
                 this.preloadCollectionNames(results);
             }
-            this.updateDataSource(pageNumber, results);
+            // Update the data source for each returned page
+            for (let i = 0; i < numPages; i += 1) {
+                const pageStartIndex = this.pageSize * i;
+                this.updateDataSource(pageNumber + i, results.slice(pageStartIndex, pageStartIndex + this.pageSize));
+            }
         }
         // When we reach the end of the data, we can set the infinite scroller's
         // item count to the real total number of results (rather than the
@@ -1118,7 +1152,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 this.infiniteScroller.itemCount = this.totalResults;
             }
         }
-        (_k = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _k === void 0 ? void 0 : _k.delete(pageNumber);
+        for (let i = 0; i < numPages; i += 1) {
+            (_k = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _k === void 0 ? void 0 : _k.delete(pageNumber + i);
+        }
     }
     preloadCollectionNames(results) {
         var _a;
@@ -1324,309 +1360,331 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.fetchPage(this.pagesToRender);
         }
     }
-};
-CollectionBrowser.styles = css `
-    :host {
-      display: block;
+    static get styles() {
+        return [
+            srOnlyStyle,
+            css `
+        :host {
+          display: block;
+
+          --leftColumnWidth: 18rem;
+          --leftColumnPaddingRight: 2.5rem;
+        }
 
-      --leftColumnWidth: 18rem;
-      --leftColumnPaddingRight: 2.5rem;
-    }
+        /**
+        * When page width resizes from desktop to mobile, use this class to
+        * disable expand/collapse transition when loading.
+        */
+        .preload * {
+          transition: none !important;
+          -webkit-transition: none !important;
+          -moz-transition: none !important;
+          -ms-transition: none !important;
+          -o-transition: none !important;
+        }
 
-    /**
-    * When page width resizes from desktop to mobile, use this class to
-    * disable expand/collapse transition when loading.
-    */
-    .preload * {
-      transition: none !important;
-      -webkit-transition: none !important;
-      -moz-transition: none !important;
-      -ms-transition: none !important;
-      -o-transition: none !important;
-    }
+        #content-container {
+          display: flex;
+        }
 
-    #content-container {
-      display: flex;
-    }
+        .collapser-icon {
+          display: inline-block;
+        }
 
-    .collapser {
-      display: inline-block;
-    }
+        .collapser-icon svg {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          transition: transform 0.2s ease-out;
+        }
 
-    .collapser svg {
-      width: 10px;
-      height: 10px;
-      transition: transform 0.2s ease-out;
-    }
+        #mobile-filter-collapse > summary {
+          cursor: pointer;
+          list-style: none;
+        }
 
-    .collapser.open svg {
-      transform: rotate(90deg);
-    }
+        #mobile-filter-collapse[open] > summary {
+          margin-bottom: 10px;
+        }
 
-    #mobile-filter-collapse h1 {
-      cursor: pointer;
-    }
+        #mobile-filter-collapse h2 {
+          display: inline-block;
+          margin: 0;
+          font-size: 2rem;
+        }
 
-    #content-container.mobile {
-      display: block;
-    }
+        #mobile-filter-collapse[open] svg {
+          transform: rotate(90deg);
+        }
 
-    .column {
-      padding-top: 2rem;
-    }
+        #content-container.mobile {
+          display: block;
+        }
 
-    #right-column {
-      flex: 1;
-      position: relative;
-      border-left: 1px solid rgb(232, 232, 232);
-      border-right: 1px solid rgb(232, 232, 232);
-      padding-left: 1rem;
-      padding-right: 1rem;
-      background: #fff;
-    }
+        .column {
+          padding-top: 2rem;
+        }
 
-    .mobile #right-column {
-      border-left: none;
-      padding: 5px 5px 0;
-    }
+        #right-column {
+          flex: 1;
+          position: relative;
+          border-left: 1px solid rgb(232, 232, 232);
+          border-right: 1px solid rgb(232, 232, 232);
+          padding-left: 1rem;
+          padding-right: 1rem;
+          background: #fff;
+        }
 
-    #left-column {
-      width: var(--leftColumnWidth, 18rem);
-      /* Prevents Safari from shrinking col at first draw */
-      min-width: var(--leftColumnWidth, 18rem);
-      padding-top: 0;
-      /* Reduced padding by 0.2rem to add the invisible border in the rule below */
-      padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
-      border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
-      z-index: 1;
-    }
+        .mobile #right-column {
+          border-left: none;
+          padding: 5px 5px 0;
+        }
 
-    .desktop #left-column {
-      top: 0;
-      position: sticky;
-      height: calc(100vh - 2rem);
-      max-height: calc(100vh - 2rem);
-      overflow-x: hidden;
-      overflow-y: scroll;
+        #left-column {
+          width: var(--leftColumnWidth, 18rem);
+          /* Prevents Safari from shrinking col at first draw */
+          min-width: var(--leftColumnWidth, 18rem);
+          padding-top: 0;
+          /* Reduced padding by 0.2rem to add the invisible border in the rule below */
+          padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
+          border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
+          z-index: 1;
+        }
 
-      /*
-       * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
-       * does at least give us a tiny bit of control over width & color.
-       */
-      scrollbar-width: thin;
-      scrollbar-color: transparent transparent;
-    }
-    .desktop #left-column:hover {
-      scrollbar-color: auto;
-    }
-    .desktop #left-column::-webkit-scrollbar {
-      appearance: none;
-      width: 6px;
-    }
-    .desktop #left-column::-webkit-scrollbar-button {
-      height: 3px;
-      background: transparent;
-    }
-    .desktop #left-column::-webkit-scrollbar-corner {
-      background: transparent;
-    }
-    .desktop #left-column::-webkit-scrollbar-thumb {
-      border-radius: 4px;
-    }
-    .desktop #left-column:hover::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.15);
-    }
-    .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
-      background: rgba(0, 0, 0, 0.2);
-    }
-    .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
-      background: rgba(0, 0, 0, 0.3);
-    }
+        .desktop #left-column {
+          top: 0;
+          position: sticky;
+          height: calc(100vh - 2rem);
+          max-height: calc(100vh - 2rem);
+          overflow-x: hidden;
+          overflow-y: scroll;
 
-    #facets-bottom-fade {
-      background: linear-gradient(
-        to bottom,
-        #f5f5f700 0%,
-        #f5f5f7c0 50%,
-        #f5f5f7 80%,
-        #f5f5f7 100%
-      );
-      position: fixed;
-      bottom: 0;
-      height: 50px;
-      /* Wide enough to cover the content, but leave the scrollbar uncovered */
-      width: calc(
-        var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
-      );
-      z-index: 2;
-      pointer-events: none;
-      transition: height 0.1s ease;
-    }
-    #facets-bottom-fade.hidden {
-      height: 0;
-    }
+          /*
+          * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
+          * does at least give us a tiny bit of control over width & color.
+          */
+          scrollbar-width: thin;
+          scrollbar-color: transparent transparent;
+        }
+        .desktop #left-column:hover {
+          scrollbar-color: auto;
+        }
+        .desktop #left-column::-webkit-scrollbar {
+          appearance: none;
+          width: 6px;
+        }
+        .desktop #left-column::-webkit-scrollbar-button {
+          height: 3px;
+          background: transparent;
+        }
+        .desktop #left-column::-webkit-scrollbar-corner {
+          background: transparent;
+        }
+        .desktop #left-column::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.15);
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
+          background: rgba(0, 0, 0, 0.2);
+        }
+        .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
+          background: rgba(0, 0, 0, 0.3);
+        }
 
-    .desktop #left-column-scroll-sentinel {
-      width: 1px;
-      height: 100vh;
-      background: transparent;
-    }
+        #facets-bottom-fade {
+          background: linear-gradient(
+            to bottom,
+            #f5f5f700 0%,
+            #f5f5f7c0 50%,
+            #f5f5f7 80%,
+            #f5f5f7 100%
+          );
+          position: fixed;
+          bottom: 0;
+          height: 50px;
+          /* Wide enough to cover the content, but leave the scrollbar uncovered */
+          width: calc(
+            var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
+          );
+          z-index: 2;
+          pointer-events: none;
+          transition: height 0.1s ease;
+        }
+        #facets-bottom-fade.hidden {
+          height: 0;
+        }
 
-    .desktop #facets-scroll-sentinel {
-      width: 1px;
-      height: 1px;
-      background: transparent;
-    }
+        .desktop #left-column-scroll-sentinel {
+          width: 1px;
+          height: 100vh;
+          background: transparent;
+        }
 
-    .mobile #left-column {
-      width: 100%;
-      padding: 0;
-    }
+        .desktop #facets-scroll-sentinel {
+          width: 1px;
+          height: 1px;
+          background: transparent;
+        }
 
-    #mobile-header-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
+        .mobile #left-column {
+          width: 100%;
+          padding: 0;
+        }
 
-    .desktop #mobile-header-container {
-      padding-top: 2rem;
-    }
+        #mobile-header-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          margin: 10px 0;
+        }
 
-    #facets-container {
-      position: relative;
-      max-height: 0;
-      transition: max-height 0.2s ease-in-out;
-      z-index: 1;
-      padding-bottom: 2rem;
-    }
+        .desktop #mobile-header-container {
+          padding-top: 2rem;
+        }
 
-    .mobile #facets-container {
-      overflow: hidden;
-      padding-bottom: 0;
-      padding-left: 10px;
-      padding-right: 10px;
-    }
+        #facets-container {
+          position: relative;
+          max-height: 0;
+          transition: max-height 0.2s ease-in-out;
+          z-index: 1;
+          padding-bottom: 2rem;
+        }
 
-    #facets-container.expanded {
-      max-height: 2000px;
-    }
+        .mobile #facets-container {
+          overflow: hidden;
+          padding-bottom: 0;
+          padding-left: 10px;
+          padding-right: 10px;
+        }
 
-    #results-total {
-      display: flex;
-      align-items: baseline;
-      margin-bottom: 5rem;
-    }
+        #facets-container.expanded {
+          max-height: 2000px;
+        }
 
-    .mobile #results-total {
-      margin-bottom: 0;
-    }
+        #results-total {
+          display: flex;
+          align-items: baseline;
+          margin-bottom: 5rem;
+        }
 
-    #big-results-count {
-      font-size: 2.4rem;
-      font-weight: 500;
-      margin-right: 5px;
-    }
+        .mobile #results-total {
+          margin-bottom: 0;
+          margin-right: 5px;
+        }
 
-    #big-results-label {
-      font-size: 1.4rem;
-      font-weight: 200;
-    }
+        #big-results-count {
+          font-size: 2.4rem;
+          font-weight: 500;
+          margin-right: 5px;
+        }
 
-    #list-header {
-      max-height: 4.2rem;
-    }
+        #big-results-label {
+          font-size: 1.4rem;
+          font-weight: 200;
+        }
 
-    .loading-cover {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      z-index: 1;
-      padding-top: 50px;
-    }
+        #list-header {
+          max-height: 4.2rem;
+        }
 
-    circular-activity-indicator {
-      width: 30px;
-      height: 30px;
-    }
+        .loading-cover {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          z-index: 1;
+          padding-top: 50px;
+        }
 
-    sort-filter-bar {
-      display: block;
-      margin-bottom: 4rem;
-    }
+        circular-activity-indicator {
+          width: 30px;
+          height: 30px;
+        }
 
-    infinite-scroller {
-      display: block;
-      --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
-      --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
-    }
+        sort-filter-bar {
+          display: block;
+          margin-bottom: 4rem;
+        }
 
-    infinite-scroller.list-compact {
-      --infiniteScrollerCellMinWidth: var(
-        --collectionBrowserCellMinWidth,
-        100%
-      );
-      --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
-      --infiniteScrollerCellMaxHeight: 56px;
-      --infiniteScrollerRowGap: 0px;
-    }
+        infinite-scroller {
+          display: block;
+          --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
+          --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
+        }
 
-    infinite-scroller.list-detail {
-      --infiniteScrollerCellMinWidth: var(
-        --collectionBrowserCellMinWidth,
-        100%
-      );
-      --infiniteScrollerCellMinHeight: var(
-        --collectionBrowserCellMinHeight,
-        5rem
-      );
-      /*
-        30px in spec, compensating for a -4px margin
-        to align title with top of item image
-        src/tiles/list/tile-list.ts
-       */
-      --infiniteScrollerRowGap: 34px;
-    }
+        infinite-scroller.list-compact {
+          --infiniteScrollerCellMinWidth: var(
+            --collectionBrowserCellMinWidth,
+            100%
+          );
+          --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
+          --infiniteScrollerCellMaxHeight: 56px;
+          --infiniteScrollerRowGap: 0px;
+        }
 
-    .mobile infinite-scroller.list-detail {
-      --infiniteScrollerRowGap: 24px;
-    }
+        infinite-scroller.list-detail {
+          --infiniteScrollerCellMinWidth: var(
+            --collectionBrowserCellMinWidth,
+            100%
+          );
+          --infiniteScrollerCellMinHeight: var(
+            --collectionBrowserCellMinHeight,
+            5rem
+          );
+          /*
+            30px in spec, compensating for a -4px margin
+            to align title with top of item image
+            src/tiles/list/tile-list.ts
+          */
+          --infiniteScrollerRowGap: 34px;
+        }
 
-    infinite-scroller.grid {
-      --infiniteScrollerCellMinWidth: var(
-        --collectionBrowserCellMinWidth,
-        17rem
-      );
-      --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);
-    }
+        .mobile infinite-scroller.list-detail {
+          --infiniteScrollerRowGap: 24px;
+        }
 
-    /* Allow tiles to shrink a bit further at smaller viewport widths */
-    @media screen and (max-width: 880px) {
-      infinite-scroller.grid {
-        --infiniteScrollerCellMinWidth: var(
-          --collectionBrowserCellMinWidth,
-          15rem
-        );
-      }
-    }
-    /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
-    @media screen and (max-width: 360px) {
-      infinite-scroller.grid {
-        --infiniteScrollerCellMinWidth: var(
-          --collectionBrowserCellMinWidth,
-          12rem
-        );
-      }
-    }
+        infinite-scroller.grid {
+          --infiniteScrollerCellMinWidth: var(
+            --collectionBrowserCellMinWidth,
+            17rem
+          );
+          --infiniteScrollerCellMaxWidth: var(
+            --collectionBrowserCellMaxWidth,
+            1fr
+          );
+        }
 
-    infinite-scroller.hidden {
-      display: none;
-    }
-  `;
+        /* Allow tiles to shrink a bit further at smaller viewport widths */
+        @media screen and (max-width: 880px) {
+          infinite-scroller.grid {
+            --infiniteScrollerCellMinWidth: var(
+              --collectionBrowserCellMinWidth,
+              15rem
+            );
+          }
+        }
+        /* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
+        @media screen and (max-width: 360px) {
+          infinite-scroller.grid {
+            --infiniteScrollerCellMinWidth: var(
+              --collectionBrowserCellMinWidth,
+              12rem
+            );
+          }
+        }
+
+        infinite-scroller.hidden {
+          display: none;
+        }
+      `,
+        ];
+    }
+};
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "baseNavigationUrl", void 0);