[release/9.0] [Identity][Templates] Ensure placeholders don't overlap with text

[github-actions]

Backport of #57783 to release/9.0

/cc @javiercn

[Identity][Templates] Ensure placeholders don't overlap with text

Placeholder text on input textboxes overlaps with the label texts.

Description

• As part of an accessibility fix, we started displaying placeholders on input elements.
• In some circumstances, these placeholders overlap with the labels on the input text boxes, making it problematic to read them.
• The fix addresses this by reducing the size of the placeholders and making inputs bigger to avoid any overlap.

Fixes https://github.com/dotnet/AspNetCore-ManualTests/issues/3081

Customer Impact

When the window size is small enough, customers could see overlapped text that's hard to read and is sometimes even impossible.

Regression?

• Yes
• No

8.0 since we introduced this behavior on 9.0 as part of accessibility fixes.

Risk

• High
• Medium
• Low

The attached videos serve as validation of the fix, in addition to that, the UI is completely customizable by customers.

Verification

• Manual (required)
• Automated

Old behavior

New behavior

AccessibilityFix.mp4

Fix_MVC.mp4

Packaging changes reviewed?

• Yes
• No
• N/A

---

When servicing release/2.1

• Make necessary changes in eng/PatchConfig.props