fix(input): prevent the floating label from overflowing

[crisbeto]

The calc that was used to truncate the long input labels was actually making them longer on IE.
This is because IE calculates whether to overflow an element before applying any of the transforms.

Closes #7403.

@EladBezalel can you take a look at this since it was introduced with fd46483.

[crisbeto]

I updated the PR to remove those calcs entirely. We can't depend on them in IE because it ignores the transform when determining whether to overflow the parent.

[EladBezalel]

@crisbeto so the label isn't expanding?

[ThomasBurleson]

@crisbeto - what about #5331

[crisbeto]

@EladBezalel The label is expanding, but it's causing an overflow in IE/Edge.
@ThomasBurleson That will still work.

Here's the situation:
Right now, when the label starts "floating" it gets reduced to 75% of it's original size via scale(0.75). This gives us the extra 25% on the sides which we can use to expand the label a little more and show some more text. We do it by increasing the label width. This works fine in most browsers where the transform gets accounted for when determining whether to overflow the parent. On the other hand, IE/Edge determines whether to overflow the parent before any transformations are applied, which causes it to always overflow. Here's a fiddle with an example of the issue. Try focusing any of the input in IE or Edge and then some other browser.
I think we should avoid this behaviour altogether.