Fix changes dropdown ellipsis working across browsers

What does this MR do?

Fixes the changes dropdown ellipsis not working across different browsers. We now set a max character number & don't show anymore characters after this & add the ellipsis text at the start.

The other option is to use JS to do this but we might as well do it at the render stage rather than after.

I did also try this dynamically by checking if the text is overflowing but the only way to do this is by accessing the width of the element which causes a reflow so for a large dropdown the performance wasn't great.

What are the relevant issue numbers?

Closes #41561 (closed), #41684 (closed)