From 66d5f8d5c12e98d25a72021336d85102d2293ac9 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Fri, 28 Aug 2020 12:02:44 +1000
Subject: [PATCH] Align first product flush to the search bar

---
 app/assets/stylesheets/darkswarm/shop.scss        | 12 +++++++++++-
 app/assets/stylesheets/darkswarm/shop_search.scss |  1 -
 app/views/shop/products/_form.html.haml           |  2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/shop.scss b/app/assets/stylesheets/darkswarm/shop.scss
index 5e76ab7e66..599bdc2ef8 100644
--- a/app/assets/stylesheets/darkswarm/shop.scss
+++ b/app/assets/stylesheets/darkswarm/shop.scss
@@ -28,6 +28,10 @@
     }
   }
 
+  .filter-header {
+    margin-top: 1.1em;
+  }
+
   products {
     display: block;
 
@@ -67,7 +71,13 @@
     product {
       @include csstrans;
 
-      border-top: 1px solid #e5e5e5;
+      // Avoid margin collapsing which breaks the flush alignment of the first
+      // image. https://stackoverflow.com/a/19719427/3377535
+      overflow: auto;
+
+      &:nth-child(n + 2) {
+        border-top: 1px solid #e5e5e5;
+      }
       padding-bottom: 1px;
       position: relative;
       display: block;
diff --git a/app/assets/stylesheets/darkswarm/shop_search.scss b/app/assets/stylesheets/darkswarm/shop_search.scss
index 4b141cd021..9749bba972 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.scss
@@ -6,7 +6,6 @@
   background-color: $grey-100;
   height: 5em;
   padding: 1em 0;
-  margin-bottom: 1em;
   position: relative;
   z-index: 5;
 
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
index 2ce029f304..77a0b3fded 100644
--- a/app/views/shop/products/_form.html.haml
+++ b/app/views/shop/products/_form.html.haml
@@ -24,7 +24,7 @@
                     %img.spinner{ src: image_path("spinning-circles.svg") }
 
           .hide-for-medium-down.large-2.columns
-            %h5
+            %h5.filter-header
               = t(:products_filter_by)
               %span{ng: {show: 'filtersCount()' }}
                 = "({{ filtersCount() }} #{t(:products_filter_selected)})"