Fix content overflow in user hovercards

Summary:
Fixes T13273. This element is a bit weird, but I think I fixed it without breaking anything.

The CSS is used by project hovercards and user hovercards, but they each have a class which builds mostly-shared-but-not-really-identical CSS, instead of having a single `View` class with modes. So I'm not 100% sure I didn't break something obscure, but I couldn't find anything this breaks.

The major issue is that all the text content has "position: absolute". Instead, make the image "absolute" and the text actual positioned content. Then fix all the margins/padding/spacing/layout and add overflow. Seems to work?

Plus: hide availability for disabled users, for consistency with D20342.

Test Plan:
Before:

{F6320155}

After:

{F6320156}

I think this is pixel-exact except for the overflow behavior.

Also:

  - Viewed some other user hovercards, including a disabled user. They all looked unchanged.
  - Viewed some project hovercards. They all looked good, too.

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T13273

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

Author: epriestley

resources/celerity/map.php

@@ -99,7 +99,7 @@
     'rsrc/css/application/policy/policy-transaction-detail.css' => 'c02b8384',
     'rsrc/css/application/policy/policy.css' => 'ceb56a08',
     'rsrc/css/application/ponder/ponder-view.css' => '05a09d0a',
-    'rsrc/css/application/project/project-card-view.css' => '3b1f7b20',
+    'rsrc/css/application/project/project-card-view.css' => '4e7371cd',
     'rsrc/css/application/project/project-triggers.css' => 'cb866c2d',
     'rsrc/css/application/project/project-view.css' => '567858b3',
     'rsrc/css/application/releeph/releeph-core.css' => 'f81ff2db',
@@ -881,7 +881,7 @@
     'policy-edit-css' => '8794e2ed',
     'policy-transaction-detail-css' => 'c02b8384',
     'ponder-view-css' => '05a09d0a',
-    'project-card-view-css' => '3b1f7b20',
+    'project-card-view-css' => '4e7371cd',
     'project-triggers-css' => 'cb866c2d',
     'project-view-css' => '567858b3',
     'releeph-core' => 'f81ff2db',

src/applications/people/view/PhabricatorUserCardView.php

@@ -95,14 +95,17 @@ protected function getTagContent() {
       'fa-user-plus',
       phabricator_date($user->getDateCreated(), $viewer));
 
-    if (PhabricatorApplication::isClassInstalledForViewer(
-        'PhabricatorCalendarApplication',
-        $viewer)) {
-      $body[] = $this->addItem(
-        'fa-calendar-o',
-        id(new PHUIUserAvailabilityView())
-          ->setViewer($viewer)
-          ->setAvailableUser($user));
+    $has_calendar = PhabricatorApplication::isClassInstalledForViewer(
+      'PhabricatorCalendarApplication',
+      $viewer);
+    if ($has_calendar) {
+      if (!$user->getIsDisabled()) {
+        $body[] = $this->addItem(
+          'fa-calendar-o',
+          id(new PHUIUserAvailabilityView())
+            ->setViewer($viewer)
+            ->setAvailableUser($user));
+      }
     }
 
     $classes[] = 'project-card-image';
@@ -150,8 +153,8 @@ protected function getTagContent() {
         'class' => 'project-card-inner',
       ),
       array(
-        $image,
         $header,
+        $image,
       ));
 
     return $card;

webroot/rsrc/css/application/project/project-card-view.css

@@ -36,22 +36,36 @@
 }
 
 .project-card-view .project-card-image {
+  position: absolute;
   height: 140px;
   width: 140px;
-  margin: 6px;
+  top: 6px;
+  left: 6px;
   border-radius: 3px;
 }
 
 .project-card-view .project-card-image-href {
-  display: inline-block;
+  display: block;
 }
 
 .project-card-view .project-card-item div {
   display: inline;
 }
 
+.project-card-inner {
+  position: relative;
+}
+
+.people-card-view .project-card-inner {
+  padding: 6px;
+  min-height: 140px;
+}
+
 .project-card-view .project-card-item {
   margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .project-card-view .project-card-item-text {
@@ -63,9 +77,9 @@
 }
 
 .project-card-view .project-card-header {
-  position: absolute;
-  top: 12px;
-  left: 158px;
+  margin-top: 6px;
+  margin-left: 152px;
+  overflow: hidden;
 }
 
 .project-card-header .project-card-name {