From bd0b768e7f232b0201cc5e39955fdc2ffe4817ae Mon Sep 17 00:00:00 2001
From: prusekj <prusekj@gmail.com>
Date: Mon, 8 Dec 2025 14:03:00 +0100
Subject: [PATCH] fix(console): fix TypeComponent layout in viewport - #577

---
 .../react/_ordered_multiselect_app.sass        | 18 +++++++++++++++++-
 .../OrderedMultiselectApp/Item/index.js        |  5 +++--
 2 files changed, 20 insertions(+), 3 deletions(-)

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 (
     <div className='f-c-r-ordered-multiselect-app__item'>
-      {node.label}
-
+      <div className='f-c-r-ordered-multiselect-app__item-label'>
+        {node.label}
+      </div>
       <FolioUiIcon
         class='text-danger f-c-r-ordered-multiselect-app__item-destroy'
         name='delete'