diff --git a/app/assets/stylesheets/folio/console/modules/react/_ordered_multiselect_app.sass b/app/assets/stylesheets/folio/console/modules/react/_ordered_multiselect_app.sass index b8e9ad16f4..476ee7220f 100644 --- a/app/assets/stylesheets/folio/console/modules/react/_ordered_multiselect_app.sass +++ b/app/assets/stylesheets/folio/console/modules/react/_ordered_multiselect_app.sass @@ -21,6 +21,17 @@ display: flex align-items: center padding-left: $spacer / 2 + white-space: normal + width: 100% + line-height: 1.1 + justify-content: space-between + + &__item-label + display: -webkit-box + -webkit-line-clamp: 2 + -webkit-box-orient: vertical + overflow: hidden + text-overflow: ellipsis &__item-destroy margin-left: $spacer / 2 @@ -42,7 +53,8 @@ display: none .rst__rowLabel - padding-right: 0 + width: 100% + padding-right: $spacer / 2 .rst__rowTitle font-weight: inherit @@ -51,6 +63,9 @@ padding: 0 border: 0 box-shadow: none + min-width: inherit + flex-shrink: 1 + overflow: hidden .rst__nodeContent left: 0 !important @@ -67,6 +82,7 @@ width: 24px height: 100% justify-content: flex-end + flex-shrink: 0 .folio-react-wrap--ordered-multiselect-not-sortable .f-c-r-ordered-multiselect-app diff --git a/react/src/containers/OrderedMultiselectApp/Item/index.js b/react/src/containers/OrderedMultiselectApp/Item/index.js index ba5e37e542..0d04c0e766 100644 --- a/react/src/containers/OrderedMultiselectApp/Item/index.js +++ b/react/src/containers/OrderedMultiselectApp/Item/index.js @@ -6,8 +6,9 @@ import FolioUiIcon from 'components/FolioUiIcon' function Item ({ path, node, remove }) { return (
- {node.label} - +
+ {node.label} +