WEBDEV-8164: Improve navigability of items on Facets > More pane

.gitignore

@@ -42,3 +42,5 @@ lerna-debug.log*
 
 # We use yarn.lock
 package-lock.json
+
+.claude/

package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "4.1.0",
+  "version": "4.2.0-alpha-webdev8164.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -29,6 +29,7 @@
     "@internetarchive/feature-feedback": "^1.0.0",
     "@internetarchive/field-parsers": "^1.0.0",
     "@internetarchive/histogram-date-range": "^1.4.1",
+    "@internetarchive/ia-clearable-text-input": "^1.1.1",
     "@internetarchive/ia-dropdown": "^2.0.0",
     "@internetarchive/iaux-item-metadata": "^1.0.5",
     "@internetarchive/infinite-scroller": "^1.0.1",

src/app-root.ts

@@ -950,10 +950,6 @@ export class AppRoot extends LitElement {
       --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
       --modalTitleLineHeight: 4rem;
       --modalTitleFontSize: 1.8rem;
-      --modalCornerRadius: 0;
-      --modalBottomPadding: 0;
-      --modalBottomMargin: 0;
-      --modalScrollOffset: 0;
       --modalCornerRadius: 0.5rem;
     }
     modal-manager.expanded-date-picker {

src/collection-facets/facets-template.ts

@@ -63,11 +63,16 @@ export class FacetsTemplate extends LitElement {
   static get styles(): CSSResultGroup {
     const columnCount = css`var(--facetsColumnCount, 1)`;
     const columnGap = css`var(--facetsColumnGap, 15px)`;
+    const columnWidth = css`var(--facetsColumnWidth, auto)`;
+    const maxHeight = css`var(--facetsMaxHeight, none)`;
 
     return css`
       .facet-rows {
         column-count: ${columnCount};
         column-gap: ${columnGap};
+        column-width: ${columnWidth};
+        max-height: ${maxHeight};
+        column-fill: auto;
       }
 
       a:link,