Change size of elements until parent reaches certain height
It looks difficult to decypher indeed. Let's try it though. Some little bits which came to my mind at first glance:


I'd recommend using 4 spaces of indentation
maybe it's personnal taste but I would try not mixing jquery and vanilla js
as I understood, this keyword always refers to the same object, doesn't it? in that case maybe you could declare the selectors at the top of the function?

const thisElementId = get(this, 'elementId');
const selectorOwlDots = `#${thisElementId} .owl-carousel .owl-dots`;
const selectorButtonSpans = `#${thisElementId} div.owl-dots &gt; button &gt; span`;

declarations of const elCopy = el; are useless, just refer to el and rename it to something more meaningful
the handler of _waitFor should be declared as a function:

this._waitFor( selectorButtonSpans ).then( changeSizes ).catch( handleError );

function changeSizes() {
    ...
}

function handleError( err ) {
    ...
}

you can also simplify the initial exit condition a bit

let dotRowHeight = $(selectorOwlDots).height() || 25;
if ( dotRowHeight &lt;= 25 ) {
    return;
}

you have two initial checks on dotRowHeight - I think you could reduce them to just one ( one is the one I simplified, the other is inside the _waitFor handler )


That should make the code a bit more readable BUT I think this code is doing the wrong thing altogether. The problem is - you are changing the size of elements in a loop until some condition is met. This is a bad practice - I've seen people ending up with infinite loops when doing such things. What I think you should do instead is:


read all the sizes you need
calculate sizes to apply to elements
apply sizes
if anything breaks - you do not have an infinite loop of elements jumping up and down on your page


Always try to minimize the number of interactions between your script and the UI.