Merge pull request #879 from City-of-Helsinki/UHF-9107

UHF-9107: Unified button placement on filter searches

src/scss/06_components/paragraphs/_react-search.scss

@@ -20,6 +20,10 @@
   margin-bottom: $spacing-and-half;
 }
 
+.hdbt-search--react__form-container {
+  max-width: $content-width-max;
+}
+
 .hdbt-search--react__text-field {
   margin-bottom: $spacing-double;
 }

src/scss/06_components/paragraphs/_unit-search.scss

@@ -21,32 +21,39 @@
 .views--unit-search {
   margin-top: $spacing-double;
 
+  .form-actions {
+    width: 100%;
+  }
+
   .form-actions [data-hds-component='button']:not([class*='hds-button']):where(
     :not([data-hds-variant]), // When variant is not defined, we fallback to primary styles
     [data-hds-variant='primary'],
   ),
   .form-actions .hds-button--primary {
+    margin-top: $spacing;
+    max-width: 280px; // Max-width for button from hds/designs.
+    min-width: 44px; // Min-width for button from hds/designs.
     width: 100%;
-
-    @include breakpoint($breakpoint-m) {
-      margin-left: $spacing-and-half;
-    }
   }
 
   .views-exposed-form {
     @include breakpoint($breakpoint-m) {
       align-items: flex-end;
       display: flex;
       flex-wrap: wrap;
+      max-width: $content-width-max;
     }
 
     .form-item {
       @include breakpoint($breakpoint-m) {
-        margin-bottom: 0;
-        width: 70%;
+        width: 100%;
       }
     }
 
+    .description {
+      white-space: normal;
+    }
+
     .hds-text-input__input-wrapper {
       &::after {
         @include pseudo-icon('search', 20px, $color-black, block);
@@ -62,17 +69,8 @@
       }
     }
 
-    // Move language checkbox to a new row and set proper margin
     [data-drupal-selector='edit-provided-languages-value'] {
       margin-top: $spacing-and-half;
-      order: 1;
-    }
-
-    .form-actions {
-      @include breakpoint($breakpoint-m) {
-        display: flex;
-        width: 30%;
-      }
     }
   }