fix(input): floating label works correctly with long text and notch

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

During testing, I noticed that my implemented of the notch in the MD outline was incorrect, causing the gap to be much wider than necessary when using longer labels.

I also noticed that long label texts do not flow correctly in the container.

What is the new behavior?

• Long labels are now correctly truncated so they do not break the input layout
• Revamped how we create the notch in the MD outline style so the gap is correctly sized.
• Added tests

Does this introduce a breaking change?

• Yes
• No

Other information

[liamdebeasi]

@amandaejohnston This is the same PR as #26252, but I accidentally merged it when I meant to merge #26248 (I had both open in tabs next to each other 🙃)

[averyjohnston]

For stacked, the label truncation seems to work differently between md and ios, unlike floating:

Was that intentional?

[liamdebeasi]

No, that was some extra code I copied from the floating label. I fixed that in 336d809 and am updating screenshots.

[averyjohnston]

I'm still seeing the inconsistent behavior, both when checking locally and in the screenshots. Example of the latter:

[averyjohnston]

Looking good now 👍 Thank you!