From cdfa23fc6f11650c0853f6139b8af61f12890260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 29 Jan 2021 16:56:40 +0100
Subject: [PATCH] Adjust icon margins on small screens

On these screens, sometimes the icons will be `$sdg-icon-min-width`
wide, but the margins were not taking this into account.

We can use CSS `max` function to set minimum margins just like we set
minimum width. However, there are two things to take into account:

* LibSass does not support these functions as it tries to use Sass own
  functionst at compile time, so we need to hack them writing `Max()`
  (which works in CSS because it is not case sensitive)
* Not all browsers support it (90% at the time of writing), so we write
  the rules twice (the first time for browsers not supporting it); we
  could use `@supports` but then we would have to overwrite some of the
  rules in the `.sdg-goals-index .sdg-goal-list` selector using
  `!important` or adding a `@supports` clause there as well
---
 app/assets/stylesheets/mixins.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index e54f735fd..afd81ecd3 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -228,16 +228,24 @@
 }
 
 @mixin sdg-goal-list($spacing: 1ch) {
+  $min-spacing: $sdg-icon-min-width / 10;
+  $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};
+
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin: -$spacing 0 $line-height / 3 -#{$spacing};
+  margin-left: calc(-1 * #{$max-spacing});
+  margin-top: calc(-1 * #{$max-spacing});
   width: calc(100% + #{$spacing});
+  width: calc(100% + #{$max-spacing});
 
   li {
     margin-bottom: 0;
     margin-left: $spacing;
+    margin-left: $max-spacing;
     margin-top: $spacing;
+    margin-top: $max-spacing;
   }
 }