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;