Avoid horizontal scroll bar in tree component

Sorry it's taken so long, this is the web of CSS that I have for this...

/* ################################################### */
/* edits to the Tree component to display long text on multiple lines */
.tree-item {
    height: fit-content !important;
    padding: 4px 0px; /*added this*/
}
.tree-item-label {
    flex: unset !important;
    flex-wrap: nowrap; /*added this*/
}
.text-scroll{
    padding-top:2px;
    overflow-wrap: break-word !important;
    white-space:pre-wrap !important;
}
.label-wrapper-icon {
    display: block !important;
    margin: auto 0; /* display in the middle of the line height*/
}
.label-wrapper-text {
    margin: auto 0; /* display in the middle of the line height*/
}
.terminal-alignment.last-child{
    height: 16px !important;
}
.terminal-alignment .cross-alignment{
    height: 16px !important;
}
.tree .tree-item-label .label-wrapper{
	align-items: start;
}
/* END: edits to the Tree component to display long text on multiple lines */
/* ################################################### */

This all comes from this post with all help coming from @victordcq the :mage:

3 Likes