Commit c4856c37 authored by epriestley's avatar epriestley
Browse files

Fix content overflow in user hovercards

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:




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


  - 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:
parent eecee172
......@@ -99,7 +99,7 @@ return array(
'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 @@ return array(
'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',
......@@ -95,14 +95,17 @@ final class PhabricatorUserCardView extends AphrontTagView {
phabricator_date($user->getDateCreated(), $viewer));
if (PhabricatorApplication::isClassInstalledForViewer(
$viewer)) {
$body[] = $this->addItem(
id(new PHUIUserAvailabilityView())
$has_calendar = PhabricatorApplication::isClassInstalledForViewer(
if ($has_calendar) {
if (!$user->getIsDisabled()) {
$body[] = $this->addItem(
id(new PHUIUserAvailabilityView())
$classes[] = 'project-card-image';
......@@ -150,8 +153,8 @@ final class PhabricatorUserCardView extends AphrontTagView {
'class' => 'project-card-inner',
return $card;
......@@ -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 {
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment