Refactor search bar styles for responsiveness

wazuh · Oct 9, 2024 · 48c74df · 48c74df
1 parent 5d9a1fc
commit 48c74df
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 55 deletions.
diff --git a/plugins/main/public/components/common/modules/module.scss b/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;
     }

diff --git a/plugins/main/public/components/common/search-bar/search-bar.scss b/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;
+    }
+  }
 }
diff --git a/plugins/main/public/components/common/search-bar/search-bar.tsx b/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

diff --git a/plugins/main/public/styles/media-queries.scss b/plugins/main/public/styles/media-queries.scss
@@ -86,48 +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;
-    }
-  }
-
-  @media only screen and (max-width: 574px) {
-    .globalFilterGroup__wrapper-isVisible {
-      margin-top: -6px;
-    }
-  }
-}