@internetarchive/collection-browser 2.14.2-alpha-webdev7679.3 → 2.14.2-alpha-webdev7679.4

package/src/collection-browser.ts

@@ -1322,7 +1322,6 @@ export class CollectionBrowser
     this.tvClipFilter = queryState.tvClipFilter ?? 'all';
 
     this.pagesToRender = this.initialPageNumber;
-    console.log('pages to render:', this.pagesToRender);
 
     // We set this flag during the update to prevent the URL state persistence
     // from creating an unwanted extra history entry.

package/src/data-source/collection-browser-data-source.ts

@@ -716,7 +716,10 @@ export class CollectionBrowserDataSource
     }
 
     // Add any selected facets and internal filters
-    const combinedFilters = mergeSelectedFacets(internalFilters, selectedFacets);
+    const combinedFilters = mergeSelectedFacets(
+      internalFilters,
+      selectedFacets,
+    );
     if (combinedFilters) {
       for (const [facetName, facetValues] of Object.entries(combinedFilters)) {
         const { name, values } = this.prepareFacetForFetch(

package/src/tiles/hover/hover-pane-controller.ts

@@ -182,6 +182,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
     return this.shouldRenderHoverPane
       ? html` ${this.touchBackdropTemplate}
           <tile-hover-pane
+            popover
             .model=${this.hoverPaneProps?.model}
             .baseNavigationUrl=${this.hoverPaneProps?.baseNavigationUrl}
             .baseImageUrl=${this.hoverPaneProps?.baseImageUrl}
@@ -304,9 +305,9 @@ export class HoverPaneController implements HoverPaneControllerInterface {
     }
 
     // Subtract off the tile's own offsets
-    const hostRect = this.host.getBoundingClientRect();
-    left -= hostRect.left;
-    top -= hostRect.top;
+    // const hostRect = this.host.getBoundingClientRect();
+    // left -= hostRect.left;
+    // top -= hostRect.top;
 
     return { left, top };
   }
@@ -466,6 +467,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
 
     // Wait for the state update to render the hover pane
     await this.host.updateComplete;
+    this.hoverPane?.togglePopover(true);
     await new Promise(resolve => {
       // Pane sizes aren't accurate until next frame
       requestAnimationFrame(resolve);

package/src/tiles/hover/tile-hover-pane.ts

@@ -92,6 +92,12 @@ export class TileHoverPane extends LitElement {
 
     return css`
       :host {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        overflow: visible;
+        color: inherit;
+        background: none;
         visibility: hidden;
         opacity: 0;
         transform: translateY(8px);
@@ -146,6 +152,7 @@ export class TileHoverPane extends LitElement {
         column-gap: 5px;
         height: 3.4rem;
         padding: 0 10px;
+        border-radius: 4px 4px 0 0;
         width: fit-content;
         font-size: 1.4rem;
         color: ${iaLinkColor};