Merge pull request #3334 from alphagov/font-size-fix-search-filter-sp…

…acing

Improve the spacing and alignment of search filters on mobile

app/assets/stylesheets/components/_expander.scss

@@ -22,7 +22,10 @@
 .govuk-frontend-supported {
   .app-c-expander__heading {
     position: relative;
-    padding: 10px 8px 5px 43px;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: start;
+    align-items: center;
     margin: 0;
   }
 
@@ -45,11 +48,9 @@
 
 .app-c-expander__icon {
   display: none;
-  position: absolute;
-  top: 0;
-  left: 9px;
   width: 30px;
   height: 40px;
+  margin-inline: 9px 4px;
   fill: govuk-colour("black");
 }
 

app/assets/stylesheets/components/_mobile-filters.scss

@@ -74,7 +74,8 @@
     .facets__box {
       border-left: 5px solid #b1b4b6;
       padding-left: govuk-spacing(2);
-      margin-bottom: govuk-spacing(3);
+      padding-bottom: 2px;
+      margin-bottom: govuk-spacing(4);
     }
 
     .facets__header {
@@ -86,10 +87,14 @@
       }
     }
 
+    .facets__content {
+      padding-top: govuk-spacing(2);
+    }
+
     .facets__footer {
       display: block;
       margin-top: govuk_spacing(3);
-      margin-bottom: govuk_spacing(3);
+      margin-bottom: 0;
     }
 
     .facets__return-link {

app/assets/stylesheets/finder_frontend.scss

@@ -290,8 +290,11 @@ mark {
 }
 
 .result-info {
-  margin: 0 0 govuk-spacing(4) 0;
+  @include govuk-media-query($until: tablet) {
+    padding-bottom: govuk-spacing(2);
+  }
   border-bottom: solid 1px govuk-colour("black");
+  margin: 0 0 govuk-spacing(4) 0;
 }
 
 // NOTE: Reset from element level styles inherited from the deprecated `govuk-template`.
@@ -325,10 +328,7 @@ mark {
   cursor: pointer;
   -webkit-appearance: none;
   text-decoration: underline;
-
-  // we need consistent font-size across breakpoints
-  // so we cannot use govuk-font mixin
-  font-size: 16px;
+  @include govuk-font($size: 19);
   @include govuk-link-common;
   @include govuk-link-style-default;