Challenge participants spacing & text sizing fix

website/client/src/components/challenges/challengeDetail.vue

@@ -75,11 +75,14 @@
             class="box member-count"
             @click="showMemberModal()"
           >
+            <div class="box-content">
+              <div class="icon-number-row">
                 <div
                   class="svg-icon member-icon"
                   v-html="icons.memberIcon"
                 ></div>
-            {{ challenge.memberCount }}
+                <span class="number">{{ challenge.memberCount }}</span>
+              </div>
               <div
                 v-once
                 class="details"
@@ -87,6 +90,7 @@
                 {{ $t('participantsTitle') }}
               </div>
             </div>
+          </div>
           <div class="box">
             <div
               class="svg-icon gem-icon"
@@ -304,7 +308,7 @@
 
   .box {
     display: inline-block;
-    padding: 1em;
+    padding: 0.5em;
     border-radius: 2px;
     background-color: $white;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
@@ -314,22 +318,69 @@
     text-align: center;
     font-size: 20px;
     vertical-align: bottom;
+    overflow: hidden;
+    position: relative;
 
     &.member-count:hover {
       cursor: pointer;
     }
 
+    .box-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+    }
+
+    .icon-number-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0.1em;
+
+      .number {
+        font-size: 20px;
+        font-weight: normal;
+        margin-left: 0.2em;
+      }
+    }
+
     .svg-icon {
       width: 30px;
       display: inline-block;
-      margin-right: .2em;
       vertical-align: bottom;
     }
 
     .details {
       font-size: 12px;
-      margin-top: 0.4em;
       color: $gray-200;
+      width: 100%;
+      padding: 0 4px;
+      line-height: 1.15;
+      word-break: break-word;
+      max-height: 2.3em;
+      overflow: visible;
+    }
+
+    &.member-count {
+      .icon-number-row {
+        .svg-icon {
+          width: 24px;
+          height: 24px;
+        }
+
+        .number {
+          font-size: 18px;
+        }
+      }
+
+      .details {
+        font-size: 11px;
+        line-height: 1.1;
+        max-height: 2.2em;
+      }
     }
   }
 

website/client/src/components/header/notifications/g1g1.vue

@@ -70,13 +70,19 @@
   }
 
   .btn-secondary {
-    width: 5.75rem;
+    min-width: 5.75rem;
+    width: auto;
+    max-width: calc(100% - 2rem);
     min-height: 1.5rem;
+    padding: 0.25rem 0.75rem;
     border-radius: 2px;
     border-color: $white;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
     font-size: 12px;
     font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 </style>