From dd0bcfab97e73869c461b32fee92932e25bcdbcd Mon Sep 17 00:00:00 2001
From: negue <negue@users.noreply.github.com>
Date: Mon, 23 Dec 2019 18:10:48 +0100
Subject: [PATCH] fix challenge layout  (#11620)

* wrap challenge task icons + margins

* full width challenge card on small devices + padding under add-challenge button
---
 .../src/components/challenges/challengeItem.vue       |  5 ++++-
 .../src/components/challenges/findChallenges.vue      | 11 +++++++++++
 .../client/src/components/challenges/myChallenges.vue | 11 +++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/website/client/src/components/challenges/challengeItem.vue b/website/client/src/components/challenges/challengeItem.vue
index 5dd44f0656..b3a1fd61e0 100644
--- a/website/client/src/components/challenges/challengeItem.vue
+++ b/website/client/src/components/challenges/challengeItem.vue
@@ -294,8 +294,9 @@
       justify-content: space-evenly;
       background-color: $gray-700;
       text-align: center;
-      padding: 16px;
+      padding: 8px;
       border-radius: .25em;
+      flex-wrap: wrap;
 
       > div {
         .value {
@@ -326,6 +327,8 @@
       }
 
       > div.muted {
+        margin: 8px;
+
         .value {
           opacity: 0.5;
           font-size: 20px;
diff --git a/website/client/src/components/challenges/findChallenges.vue b/website/client/src/components/challenges/findChallenges.vue
index b75bd6f427..7c4342af78 100644
--- a/website/client/src/components/challenges/findChallenges.vue
+++ b/website/client/src/components/challenges/findChallenges.vue
@@ -68,6 +68,17 @@
 <style lang='scss' scoped>
   @import '~@/assets/scss/colors.scss';
 
+  @media only screen and (max-width: 768px) {
+    .header-row {
+      margin-bottom: 1rem;
+    }
+
+    .col-10.standard-page {
+      // full width on smaller devices
+      max-width: 100%;
+    }
+  }
+
   .header-row {
     h1 {
       color: $purple-200;
diff --git a/website/client/src/components/challenges/myChallenges.vue b/website/client/src/components/challenges/myChallenges.vue
index be85ea90e5..986d491574 100644
--- a/website/client/src/components/challenges/myChallenges.vue
+++ b/website/client/src/components/challenges/myChallenges.vue
@@ -88,6 +88,17 @@
 <style lang='scss' scoped>
   @import '~@/assets/scss/colors.scss';
 
+  @media only screen and (max-width: 768px) {
+    .header-row {
+      margin-bottom: 1rem;
+    }
+
+    .col-10.standard-page {
+      // full width on smaller devices
+      max-width: 100%;
+    }
+  }
+
   .header-row {
     h1 {
       color: $purple-200;