diff --git a/web/modules/custom/materio_admin/css/term-reference-tree.css b/web/modules/custom/materio_admin/css/term-reference-tree.css index 3cfd5202..e5bea32d 100644 --- a/web/modules/custom/materio_admin/css/term-reference-tree.css +++ b/web/modules/custom/materio_admin/css/term-reference-tree.css @@ -1,17 +1,26 @@ /** * Term reference tree widget: selection tree on the left, sortable track * list on the right. Transposed from the retired matminimal theme. + * + * Flexbox row instead of inline-block columns so the two blocks never wrap + * onto separate lines, whatever their content width (the previous + * inline-block version wrapped on environments with a narrower form region). */ -.term-reference-tree > ul, -.term-reference-tree aside.term-reference-tree-track-list { - display: inline-block; - vertical-align: top; +.term-reference-tree.term-reference-tree-track-list-shown { + display: flex; + flex-direction: row; + align-items: flex-start; } -.term-reference-tree > ul { - padding-right: 1em; + +.term-reference-tree.term-reference-tree-track-list-shown > ul { + flex: 1 1 45%; min-width: 45%; + padding-right: 1em; + margin: 0; } -.term-reference-tree aside.term-reference-tree-track-list { + +.term-reference-tree.term-reference-tree-track-list-shown aside.term-reference-tree-track-list { + flex: 1 1 55%; border-left: 1px solid #aaa; padding-left: 1em; }