fix(tasks): stop reward values overflowing

Fixes #1993

* Restyle reward cost area to fit three digit rewards into default view
* Apply custom styles to rewards with higher values to prevent them
from overflowing

public/css/tasks.styl

@@ -453,6 +453,27 @@ form
     li:nth-child(3n + 1):nth-last-child(2) + li
       width: 66.666%
 
+  .btn-buy
+    word-wrap: break-word
+    padding-left: 0.2em
+    text-align: left
+    span
+      position: relative
+      left: -2px
+      &:only-child
+        position: static
+        padding-left: 0.75em
+    
+    &.highValue  // If reward value exceeds three digits, drop the number below the coin icon
+      padding: 0.3em
+      text-align: center
+      span
+        display: block
+        margin: auto
+    .shop_gold + .reward-cost
+      line-height: 1
+      top: -0.1em
+
 .repeat-days
   a
     border-radius: 0.382em

views/shared/tasks/lists.jade

@@ -87,9 +87,9 @@ script(id='templates/habitrpg-tasks.html', type="text/ng-template")
                   span.glyphicon.glyphicon-comment
               //left-hand size commands
               .task-controls.task-primary
-                a.money.btn-buy.item-btn(ng-click='buy(item)')
-                  span.reward-cost {{item.value}}
+                a.money.btn-buy.item-btn(ng-class='{highValue: item.value >= 1000}', ng-click='buy(item)')
                   span.shop_gold
+                  span.reward-cost {{item.value}}
               // main content
               span(ng-class='::{"shop_{{item.key}} shop-sprite item-img": true}').reward-img
               p.task-text {{item.text()}}

views/shared/tasks/task.jade

@@ -67,10 +67,9 @@ li(bindonce='list', id='task-{{::task.id}}', ng-repeat='task in obj[list.type+"s
 
     // Rewards
     span(ng-show='task.type=="reward"')
-      a.money.btn-buy(ng-click='score(task, "down")')
-        span.reward-cost {{task.value}}
+      a.money.btn-buy(ng-class='{highValue: task.value >= 1000}', ng-click='score(task, "down")')
         span.shop_gold
-
+        span.reward-cost {{task.value}}
     // Daily & Todos
     span.task-checker.action-yesno(ng-if='::task.type=="daily" || task.type=="todo"')
       input.visuallyhidden.focusable(ng-if='$state.includes("tasks")', id='box-{{obj._id}}_{{task.id}}', type='checkbox', ng-model='task.completed', ng-change='task.type=="todo" && pushTask(task,$index,"bottom"); changeCheck(task)')