fix(style): limit filter container height and make it scrollable (#1903)

Author: silvester-pari

elements/itemfilter/src/main.js

@@ -480,7 +480,14 @@ export class EOxItemFilter extends LitElement {
         ${when(
           this.filterProperties,
           () => html`
-            <div style="display: var(--filter-display);">
+            <div
+              style="display: var(--filter-display); min-height: ${this
+                .inlineMode
+                ? "100%"
+                : this.filterProperties.length > 2
+                  ? "50%"
+                  : this.filterProperties.length * 32 + 105 + "px"}"
+            >
               <eox-itemfilter-container
                 .filters=${this.filters}
                 .filterProperties=${this.filterProperties}
@@ -537,7 +544,7 @@ export class EOxItemFilter extends LitElement {
                       </nav>
                     `,
                   )}
-                  <div class="scroll" style="flex: 1;">
+                  <div class="scroll" style="flex: 1; max-height: 100%">
                     <ul id="filters" class="list no-space">
                       ${map(
                         Object.values(this.filters),

elements/itemfilter/src/style.eox.js

@@ -56,6 +56,7 @@ eox-itemfilter-container {
   flex-grow: 0;
   flex-shrink: 0;
   overflow: hidden;
+  height: 100%;
 }
 eox-itemfilter-results {
   flex-grow: 1;
@@ -299,21 +300,27 @@ button.icon {
 }
 -container-results::-webkit-scrollbar,
 .inline-container::-webkit-scrollbar,
-.inline-content::-webkit-scrollbar {
+.inline-content::-webkit-scrollbar,
+form#itemfilter > div::-webkit-scrollbar {
   inline-size: 0.4rem;
   block-size: 0.4rem;
 }
 -container-results::-webkit-scrollbar-thumb,
 .inline-container::-webkit-scrollbar-thumb,
-.inline-content::-webkit-scrollbar-thumb {
+.inline-content::-webkit-scrollbar-thumb,
+form#itemfilter > div::-webkit-scrollbar-thumb {
   background: lightgrey;
   border-radius: 1rem;
   cursor: default;
 }
 .inline-container:is(:hover,:focus)::-webkit-scrollbar-thumb,
-.inline-content:is(:hover,:focus)::-webkit-scrollbar-thumb {
+.inline-content:is(:hover,:focus)::-webkit-scrollbar-thumb,
+form#itemfilter > div:is(:hover,:focus)::-webkit-scrollbar-thumb {
   background: var(--outline);
 }
+form#itemfilter > div::-webkit-scrollbar-thumb {
+  background: transparent; 
+}
 .hidden {
   height: 0;
   padding: 0;