Prevent long text from breaking Badges

Summary: Put super long text for title and flavor text on badges and resolve breaking issues.

Test Plan: Tested Supercalifragilisticexpialidocious for title and flavor.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D13730

resources/celerity/map.php

@@ -126,7 +126,7 @@ return array(
     'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
     'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
     'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
-    'rsrc/css/phui/phui-badge.css' => 'b6218fa8',
+    'rsrc/css/phui/phui-badge.css' => 'f25c3476',
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
     'rsrc/css/phui/phui-button.css' => '16020a60',
     'rsrc/css/phui/phui-crumbs-view.css' => 'd842f867',
@@ -775,7 +775,7 @@ return array(
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => 'd1861e06',
     'phui-action-panel-css' => '3ee9afd5',
-    'phui-badge-view-css' => 'b6218fa8',
+    'phui-badge-view-css' => 'f25c3476',
     'phui-box-css' => 'a5bb366d',
     'phui-button-css' => '16020a60',
     'phui-calendar-css' => 'ccabe893',

webroot/rsrc/css/phui/phui-badge.css

@@ -60,7 +60,8 @@
   display: block;
   position: absolute;
   width: 128px;
-  height: 100%;
+  height: 180px;
+  overflow: hidden;
 
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
@@ -113,6 +114,7 @@
   font-weight: bold;
   padding-top: 12px;
   display: block;
+  word-break: break-word;
 }
 
 .phui-badge-quality {
@@ -124,6 +126,7 @@
 .phui-badge-view-subhead {
   color: {$lightgreytext};
   font-size: {$smallerfontsize};
+  word-break: break-word;
 }
 
 .phui-badge-card-back {