diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index 8414e8f13d..755bab6213 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -85,7 +85,7 @@ export default class BrowserCell extends Component {
}
content = this.props.onPointerClick ? (
-
+
) : (
dataValue
);
@@ -102,7 +102,7 @@ export default class BrowserCell extends Component {
const object = new Parse.Object(v.className);
object.id = v.objectId;
array.push(
-
+
);
});
this.copyableValue = content =
@@ -129,7 +129,7 @@ export default class BrowserCell extends Component {
this.copyableValue = content = JSON.stringify(this.props.value);
} else if (this.props.type === 'File') {
const fileName = this.props.value.url() ? getFileName(this.props.value) : 'Uploading\u2026';
- content = ;
+ content = ;
this.copyableValue = fileName;
} else if (this.props.type === 'ACL') {
let pieces = [];
@@ -159,7 +159,7 @@ export default class BrowserCell extends Component {
} else if (this.props.type === 'Relation') {
content = this.props.setRelation ? (
-
this.props.setRelation(this.props.value)} value='View relation' followClick={true} />
+ this.props.setRelation(this.props.value)} value='View relation' followClick={true} shrinkablePill />
) : (
'Relation'
diff --git a/src/components/Pill/Pill.react.js b/src/components/Pill/Pill.react.js
index 45c6aa9d5a..81d7fe5818 100644
--- a/src/components/Pill/Pill.react.js
+++ b/src/components/Pill/Pill.react.js
@@ -10,7 +10,7 @@ import styles from 'components/Pill/Pill.scss';
import Icon from "components/Icon/Icon.react";
//TODO: refactor, may want to move onClick outside or need to make onClick able to handle link/button a11y
-let Pill = ({ value, onClick, fileDownloadLink, followClick = false }) => (
+let Pill = ({ value, onClick, fileDownloadLink, followClick = false, shrinkablePill = false }) => (
(
].join(" ")}
onClick={!followClick && onClick ? onClick : null}
>
- {value}
+ {value}
{followClick && (
!e.metaKey && onClick()}>
diff --git a/src/components/Pill/Pill.scss b/src/components/Pill/Pill.scss
index 95987e52a6..91744f68d1 100644
--- a/src/components/Pill/Pill.scss
+++ b/src/components/Pill/Pill.scss
@@ -9,9 +9,8 @@
.pill {
@include MonospaceFont;
- display: flex;
- justify-content: space-between;
- align-items: center;
+ position: relative;
+ display: inline-block;
color: #0E69A1;
height: 20px;
line-height: 20px;
@@ -22,6 +21,8 @@
text-overflow: ellipsis;
white-space: nowrap;
& a {
+ position: absolute;
+ right: 0;
height: 20px;
width: 20px;
background: #d6e5f2;
@@ -31,6 +32,14 @@
transform: rotate(316deg);
}
}
+ & .pillText {
+ position: absolute;
+ left: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ width: 75%;
+ }
}
.content {