Fix the filter are displayed cropped on screens of 575px to 767px (#7047

) * fix the filter are displayed cropped on screens of 575px to 767px * update changelog * update changelog --------- Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com>
wazuh · Oct 2, 2024 · 4431ff6 · 4431ff6
1 parent b6cca95
commit 4431ff6
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ## Wazuh v4.10.0 - OpenSearch Dashboards 2.16.0 - Revision 01
 
+## Fixed
+
+- Fixed the filter are displayed cropped on screens of 575px to 767px in vulnerability detection module [#7047](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7047)
+
 ### Added
 
 - Support for Wazuh 4.10.0

diff --git a/plugins/main/public/components/common/search-bar/search-bar.tsx b/plugins/main/public/components/common/search-bar/search-bar.tsx
@@ -6,6 +6,7 @@ import {
   SearchBarProps,
   Filter,
 } from '../../../../../../src/plugins/data/public';
+import '../../../../public/styles/media-queries.scss';
 
 export interface WzSearchBarProps extends SearchBarProps {
   fixedFilters?: Filter[];
@@ -85,14 +86,14 @@ export const WzSearchBar = ({
               </EuiFlexGroup>
             </EuiFlexItem>
           )}
-          <EuiFlexItem>
+          <EuiFlexItem className='overflow-hidden'>
             <EuiFlexGroup
               gutterSize='s'
               alignItems='center'
               responsive={false}
               wrap={true}
             >
-              <EuiFlexItem>
+              <EuiFlexItem className='overflow-hidden'>
                 <SearchBar
                   {...restProps}
                   showQueryBar={false}

diff --git a/plugins/main/public/styles/media-queries.scss b/plugins/main/public/styles/media-queries.scss
@@ -15,75 +15,113 @@
 /* -------------------------------------------------------------------------- */
 
 @-webkit-keyframes uil-ring-anim {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
 @-moz-keyframes uil-ring-anim {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
 @-webkit-keyframes uil-ring-anim {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
 @-o-keyframes uil-ring-anim {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes uil-ring-anim {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
-@media all and (-ms-high-contrast: none),
-(-ms-high-contrast: active) {
-    .no-legend svg {
-        padding-top: 10px;
-    }
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .no-legend svg {
+    padding-top: 10px;
+  }
 }
 
-@supports (-ms-ime-align:auto) {
-    .no-legend svg {
-        padding-top: 10px;
-    }
+@supports (-ms-ime-align: auto) {
+  .no-legend svg {
+    padding-top: 10px;
+  }
 }
 
 @media (min-width: 960px) {
-    md-tooltip .md-content {
-        height: auto !important;
+  md-tooltip .md-content {
+    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;
     }
+  }
 }