From d6d37558887bf5d4ce34e459aa98e221127388a8 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Mon, 27 Jul 2015 07:55:09 -0700
Subject: [PATCH] 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           | 4 ++--
 webroot/rsrc/css/phui/phui-badge.css | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 72182531c0..4511ce3cb9 100644
--- a/resources/celerity/map.php
+++ b/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',
diff --git a/webroot/rsrc/css/phui/phui-badge.css b/webroot/rsrc/css/phui/phui-badge.css
index e5f04e2707..f45a88f258 100644
--- a/webroot/rsrc/css/phui/phui-badge.css
+++ b/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 {