MPP-3416: Input labels can get blocked by email values

[rafeerahman]

This PR fixes MPP-3416.

Bug description

An issue occurs in the login page of sso.mozilla.com where the relay email gets stacked ontop of the label/placeholder for the tag.

The issue occured because the CSS being used to move the label away during focus/typing was using the selectors .form__input input:focus + label, .form__input input.has-contents + label. This CSS uses + label, which will only work when the <label> is the next adjacent element to the input. We were inserting an invisible button right after the input, which caused the CSS for the label to not render. To fix this issue, I added the button to the child of the input's parent element instead.

Another issue that occurred was the <input> class name not getting updated when the user selects a relay address from the context and in-page menu's. The selector .form__input input.has-contents + label, which shows the label's css whenever the input's class is "hasContent", was not triggerred because the class remained "" unless the user manually types something.

input class name does not get updated when selecting from these menus	input class name does not get updated when selecting from these menus

To solve this issue, I added the line .dispatchEvent(new Event('change', {bubbles:true})); when the data is being sent from either the context menu, or the in-page menu to trigger any change events.

Demo of fix (if applicable)

https://github.com/mozilla/fx-private-relay-add-on/assets/59676643/8edc64db-c50f-480e-96c5-973f886bd1fa

How to test

1. Go to sso.mozilla.com (if you are already signed in, sign out and click login)
2. [Acceptance criteria] Observe that typing an email does not stack ontop of the input label.
3. Refresh the page
4. Click on the email input
5. Right click to open the context menu and select a relay address from the Firefox Relay option
6. [Acceptance criteria] Observe that the mask that was put into the input field does not stack on the label.
7. Refresh the page
8. Click on the relay icon next to the input to open the in page menu
9. Click either 'generate new mask' or one of your existing masks
10. [Acceptance criteria] Observe that the mask that was put into the input field does not stack on the label

Checklist

• [x] All acceptance criteria are met.
• [x] All UI revisions follow the coding standards, and use Protocol tokens where applicable (see /frontend/src/styles/tokens.scss).
• [x] Commits in this PR are minimal and have descriptive commit messages.