Merge branch 'crfmc/filters' into staging

Author: crfmc

src/css/VisOverviewPanel.css

@@ -424,6 +424,13 @@ label.checkbox-container.checked .checkbox-icon {
     color: #617c9d;
     border: 1.5px solid #617c9d;
     border-radius: 4px;
+    padding: 5px 10px;
+}
+.vis-overview-panel .overview-root .dropdown-container.filter .dropdown-button .select-label {
+    max-width: 120px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .vis-overview-panel .overview-root .dropdown-container.filter .dropdown-button svg {
     width: 15px;
@@ -489,6 +496,9 @@ label.checkbox-container.checked .checkbox-icon {
     background-color: #f3f9ff;
     color: #2f68aa;
 }
+.vis-overview-panel .overview-root .dropdown-container.filter.has-selection .dropdown-button .select-label {
+    max-width: 90px;
+}
 .vis-overview-panel .overview-root .dropdown-container.filter.has-selection .dropdown-button span {
     font-weight: 600;
 }

src/ui/VisOverviewPanel/OverviewFilter.tsx

@@ -186,7 +186,9 @@ export const OverviewFilter = ({
                 aria-labelledby="select-label"
             >
                 <div className="select-label-wrapper">
-                    <span id="select-label">{title}</span>
+                    <span id={'select-label-for-' + identifier} className="select-label">
+                        {title}
+                    </span>
                     {activeFilters?.[identifier]?.length > 0 && (
                         <div className="selected-option-count">
                             <span>{activeFilters[identifier].length ?? ''}</span>