fix challenge layout (#11620)

* wrap challenge task icons + margins

* full width challenge card on small devices + padding under add-challenge button

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;

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;

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;