Avoid filter hiding when adding too many of them

CHANGELOG.md

@@ -33,6 +33,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Fixed security policy exception when it contained deprecated actions [#7042](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7042)
 - Fixed export formatted csv data with special characters from tables [#7048](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7048)
 - Fixed column reordering feature [#7072](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7072)
+- Fixed filter management to prevent hiding when adding multiple filters [#7077](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7077)
 
 ### Removed
 

plugins/main/public/components/common/modules/module.scss

@@ -106,10 +106,6 @@ discover-app-w .sidebar-container {
       margin-top: -160px;
     }
 
-    .wz-module-header-nav {
-      padding-bottom: 16px;
-    }
-
     .wz-module-body-agent-info > .euiFlexGroup > .euiFlexItem {
       max-width: unset !important;
     }

plugins/main/public/components/common/search-bar/search-bar.scss

@@ -1,13 +1,71 @@
-.wz-search-bar-no-padding .globalQueryBar:not(:empty) {
-  padding: 0px !important;
-}
-
 .wz-search-bar {
+  &.no-padding .globalQueryBar:not(:empty) {
+    padding: 0px !important;
+  }
+
   > .euiFlexGroup {
     &:first-child {
       #GlobalFilterGroup {
         display: none;
       }
     }
   }
+
+  &-query {
+    .osdQueryBar--withDatePicker {
+      align-items: flex-end;
+
+      > :first-child {
+        margin-top: 8px;
+        margin-bottom: 4px !important;
+
+        @media only screen and (max-width: 574px) {
+          margin-top: -8px;
+        }
+      }
+    }
+  }
+
+  @media only screen and (min-width: 575px) and (max-width: 767px) {
+    .globalFilterGroup__filterBar {
+      margin-top: 4px;
+    }
+
+    .globalFilterGroup__wrapper-isVisible {
+      margin-top: 0;
+    }
+
+    .euiFlexGroup--responsive > .euiFlexItem {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  @media only screen and (max-width: 767px) {
+    .euiFlexGroup--responsive {
+      -webkit-flex-wrap: wrap;
+      flex-wrap: wrap;
+      margin-left: 0;
+      margin-right: 0;
+      margin-bottom: 1px;
+    }
+  }
+
+  @media only screen and (max-width: 574px) {
+    .globalFilterGroup__wrapper-isVisible {
+      margin-top: -6px;
+    }
+
+    .euiFlexGroup--responsive {
+      margin-bottom: -3px;
+    }
+
+    > .euiFlexGroup.euiFlexGroup--gutterSmall.euiFlexGroup--directionRow.euiFlexGroup--responsive
+      > .euiFlexItem.euiFlexItem--flexGrowZero {
+      margin-bottom: 6px !important;
+    }
+
+    .osdQueryBar--withDatePicker > :first-child {
+      margin-top: -8px;
+    }
+  }
 }

plugins/main/public/components/common/search-bar/search-bar.tsx

@@ -35,7 +35,7 @@ export const WzSearchBar = ({
 
   return (
     <EuiPanel
-      className='wz-search-bar wz-search-bar-no-padding'
+      className='wz-search-bar no-padding'
       paddingSize='s'
       hasShadow={false}
       hasBorder={false}
@@ -44,6 +44,7 @@ export const WzSearchBar = ({
     >
       {showQuery ? (
         <EuiFlexGroup
+          className='wz-search-bar-query'
           gutterSize='s'
           alignItems='center'
           responsive={false}
@@ -56,7 +57,7 @@ export const WzSearchBar = ({
         </EuiFlexGroup>
       ) : null}
       {showFilters ? (
-        <EuiFlexGroup gutterSize='s'>
+        <EuiFlexGroup className='wz-search-bar-filters' gutterSize='s'>
           {hideFixedFilters ? null : (
             <EuiFlexItem grow={false}>
               <EuiFlexGroup

plugins/main/public/styles/common.scss

@@ -1439,7 +1439,6 @@ div.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--bottom.wz-menu
 }
 
 .globalFilterGroup__wrapper {
-  max-height: 100px;
   height: auto !important;
 }
 

plugins/main/public/styles/media-queries.scss

@@ -86,42 +86,3 @@
     height: auto !important;
   }
 }
-
-.wz-search-bar {
-  @media only screen and (min-width: 575px) and (max-width: 767px) {
-    .globalFilterGroup__filterBar {
-      margin-top: 0;
-    }
-  }
-
-  @media only screen and (min-width: 575px) and (max-width: 767px) {
-    .globalFilterGroup__wrapper-isVisible {
-      margin-top: 0;
-    }
-  }
-
-  @media only screen and (min-width: 575px) and (max-width: 767px) {
-    .euiFlexGroup--responsive > .euiFlexItem {
-      margin-bottom: 0 !important;
-    }
-  }
-
-  @media only screen and (min-width: 575px) and (max-width: 767px) {
-    .globalFilterGroup__wrapper-isVisible {
-      .euiFlexItem.euiFlexItem--flexGrowZero {
-        margin-bottom: 0px;
-      }
-    }
-  }
-
-  @media only screen and (min-width: 575px) and (max-width: 767px) {
-    .euiFlexGroup--responsive {
-      -webkit-flex-wrap: wrap;
-      flex-wrap: wrap;
-      margin-left: 0;
-      margin-right: 0;
-      margin-bottom: 6px;
-      margin-top: 10px;
-    }
-  }
-}