From bc58a486b67416559599990ae5fb23ee130ef8a1 Mon Sep 17 00:00:00 2001
From: Viktor Vasilev <liberalcho@gmail.com>
Date: Fri, 29 Mar 2019 15:11:34 +0200
Subject: [PATCH] Fix truncated text in association options

---
 packages/core/fields/association/index.js   |  4 +++-
 packages/core/fields/association/style.scss | 22 +++++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/core/fields/association/index.js b/packages/core/fields/association/index.js
index 5dc9de200..718e8e1e4 100644
--- a/packages/core/fields/association/index.js
+++ b/packages/core/fields/association/index.js
@@ -219,7 +219,9 @@ class AssociationField extends Component {
 
 										<div className="cf-association__option-content">
 											<span className="cf-association__option-title">
-												{ option.title }
+												<span className="cf-association__option-title-inner">
+													{ option.title }
+												</span>
 											</span>
 
 											<span className="cf-association__option-type">
diff --git a/packages/core/fields/association/style.scss b/packages/core/fields/association/style.scss
index df0d1af27..f17e56ed3 100644
--- a/packages/core/fields/association/style.scss
+++ b/packages/core/fields/association/style.scss
@@ -83,12 +83,8 @@
 }
 
 .cf-association__option-title {
-	overflow: hidden;
-	font-size: $wp-font-size;
-	line-height: $wp-line-height;
-	color: $wp-color-base-gray;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+	flex: 1;
+	position: relative;
 	margin-right: $size-base;
 
 	.cf-association__option--selected & {
@@ -96,6 +92,20 @@
 	}
 }
 
+.cf-association__option-title-inner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	font-size: $wp-font-size;
+	line-height: $wp-line-height;
+	color: $wp-color-base-gray;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	transform: translateY(-50%);
+}
+
 .cf-association__option-type {
 	font-size: 9px;
 	line-height: 1;