Improve header responsive

src/app/geosource/components/dataset-detail/dataset-table-map/dataset-table-map.component.scss

@@ -11,12 +11,32 @@
   background-color: $grey-background-color;
   padding: 0.75rem 0.875rem 0.75rem 0.875rem;
 
+  @media screen and (max-width: $desktop) {
+    flex-wrap: wrap-reverse;
+
+    .left-section,
+    .right-section {
+      flex-grow: 1;
+      width: 100%;
+      align-items: center;
+    }
+
+    .right-section {
+      display: flex;
+      margin-bottom: 0.5rem;
+    }
+  }
+
   .button {
     height: 2.25rem;
   }
 
   .left-section {
     display: flex;
+
+    @media screen and (max-width: $tablet) {
+      flex-wrap: wrap;
+    }
   }
 
   .properties-dropdown button {
@@ -33,15 +53,30 @@
 
   .right-section .button {
     margin-left: 1rem;
+
+    @media screen and (max-width: $desktop) {
+      &.button-toogle-table-map {
+        flex-grow: 1;
+        justify-content: center;
+      }
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+    }
   }
 
   .left-section .button {
     margin-right: 1rem;
   }
 
-  .button-research button {
+  .button-research .button {
     background-color: $blue-color;
 
+    @media screen and (max-width: $tablet) {
+      margin-right: 0;
+    }
+
     .icon,
     i {
       color: white;
@@ -49,8 +84,21 @@
   }
 
   .search-bar {
+    @media screen and (max-width: $desktop) {
+      flex-grow: 1;
+
+      .research-input {
+        width: 100%;
+        display: flex;
+      }
+
+      .input {
+        flex-grow: 1;
+      }
+    }
+
     .field {
-      height: 100%;
+      height: 2.25rem;
 
       .reset-research-icon {
         cursor: pointer;
@@ -64,11 +112,14 @@
       .button,
       .input,
       .reset-research-icon {
-        height: 100%;
+        height: 2.25rem;
       }
 
       .input {
-        width: 18.75rem;
+        @media screen and (min-width: $desktop) {
+          width: 18.75rem;
+        }
+
         box-shadow: none;
       }
     }
@@ -79,6 +130,11 @@
     position: relative;
     align-self: center;
     padding-bottom: 0.2rem;
+
+    @media screen and (max-width: $tablet) {
+      width: 100%;
+      margin-top: 0.5rem;
+    }
   }
 
   .result-number-bar {