From 48c74df314762c094bdc579e346ff2ecd81eeec3 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 9 Oct 2024 10:54:34 -0300
Subject: [PATCH] Refactor search bar styles for responsiveness

---
 .../components/common/modules/module.scss     |  4 --
 .../common/search-bar/search-bar.scss         | 66 +++++++++++++++++--
 .../common/search-bar/search-bar.tsx          |  5 +-
 plugins/main/public/styles/media-queries.scss | 45 -------------
 4 files changed, 65 insertions(+), 55 deletions(-)

diff --git a/plugins/main/public/components/common/modules/module.scss b/plugins/main/public/components/common/modules/module.scss
index fd906406cd..8182b3d601 100644
--- 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
index f45d922c38..badec25a41 100644
--- a/plugins/main/public/components/common/search-bar/search-bar.scss
+++ b/plugins/main/public/components/common/search-bar/search-bar.scss
@@ -1,8 +1,8 @@
-.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 {
@@ -10,4 +10,62 @@
       }
     }
   }
+
+  &-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
index c6cc9a4bf9..e12a317b76 100644
--- 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
index 18af6680d5..1556e15092 100644
--- 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;
-    }
-  }
-}