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

… with text (#57789)

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?

- [X] Yes
- [ ] No

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

## Risk

- [ ] High
- [ ] Medium
- [x] Low

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

## Verification

- [X] Manual (required)
- [ ] Automated

**Old behavior**
![image](https://github.com/user-attachments/assets/ae72b769-7215-4b0a-954b-a59fb84fbb7d)

![image](https://github.com/user-attachments/assets/f9e32542-7aa7-47ba-876e-567435ef4bdc)

**New behavior**

https://github.com/user-attachments/assets/6eae3396-9794-402d-af65-e0bc89257a44

https://github.com/user-attachments/assets/0343b4fc-5f55-4e46-a276-67c4c97645e2

## Packaging changes reviewed?

- [ ] Yes
- [ ] No
- [X] N/A

----

## When servicing release/2.1

- [ ] Make necessary changes in eng/PatchConfig.props

src/Identity/UI/src/Areas/Identity/Pages/V5/Account/Login.cshtml

@@ -7,7 +7,7 @@
 
 <h1>@ViewData["Title"]</h1>
 <div class="row">
-    <div class="col-md-4">
+    <div class="col-lg-6">
         <section>
             <form id="account" method="post">
                 <h2>Use a local account to log in.</h2>
@@ -46,7 +46,7 @@
             </form>
         </section>
     </div>
-    <div class="col-md-6 col-md-offset-2">
+    <div class="col-lg-4 col-lg-offset-2">
         <section>
             <h3>Use another service to log in.</h3>
             <hr />

src/Identity/UI/src/Areas/Identity/Pages/V5/Account/Manage/ChangePassword.cshtml

@@ -8,21 +8,21 @@
 <h3>@ViewData["Title"]</h3>
 <partial name="_StatusMessage" for="StatusMessage" />
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-6">
         <form id="change-password-form" method="post">
             <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
             <div class="form-floating mb-3">
-                <input asp-for="Input.OldPassword" class="form-control" autocomplete="current-password" aria-required="true" placeholder="Please enter your old password." />
+                <input asp-for="Input.OldPassword" class="form-control" autocomplete="current-password" aria-required="true" placeholder="Enter the old password" />
                 <label asp-for="Input.OldPassword" class="form-label"></label>
                 <span asp-validation-for="Input.OldPassword" class="text-danger"></span>
             </div>
             <div class="form-floating mb-3">
-                <input asp-for="Input.NewPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Please enter your new password." />
+                <input asp-for="Input.NewPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Enter the new password" />
                 <label asp-for="Input.NewPassword" class="form-label"></label>
                 <span asp-validation-for="Input.NewPassword" class="text-danger"></span>
             </div>
             <div class="form-floating mb-3">
-                <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Please confirm your new password."/>
+                <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Enter the new password"/>
                 <label asp-for="Input.ConfirmPassword" class="form-label"></label>
                 <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
             </div>

src/Identity/UI/src/Areas/Identity/Pages/V5/Account/Manage/Email.cshtml

@@ -8,13 +8,13 @@
 <h3>@ViewData["Title"]</h3>
 <partial name="_StatusMessage" for="StatusMessage" />
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-6">
         <form id="email-form" method="post">
             <div asp-validation-summary="All" class="text-danger" role="alert"></div>
             @if (Model.IsEmailConfirmed)
             {
                 <div class="form-floating mb-3 input-group">
-                    <input asp-for="Email" class="form-control" placeholder="Please enter your email." disabled />
+                    <input asp-for="Email" class="form-control" placeholder="Enter your email" disabled />
                         <div class="input-group-append">
                             <span class="h-100 input-group-text text-success font-weight-bold">✓</span>
                         </div>
@@ -24,13 +24,13 @@
             else
             {
                 <div class="form-floating mb-3">
-                    <input asp-for="Email" class="form-control" placeholder="Please enter your email." disabled />
+                    <input asp-for="Email" class="form-control" placeholder="Enter your email" disabled />
                     <label asp-for="Email" class="form-label"></label>
                     <button id="email-verification" type="submit" asp-page-handler="SendVerificationEmail" class="btn btn-link">Send verification email</button>
                 </div>
             }
             <div class="form-floating mb-3">
-                <input asp-for="Input.NewEmail" class="form-control" autocomplete="email" aria-required="true" placeholder="Please enter new email." />
+                <input asp-for="Input.NewEmail" class="form-control" autocomplete="email" aria-required="true" placeholder="Enter new email" />
                 <label asp-for="Input.NewEmail" class="form-label"></label>
                 <span asp-validation-for="Input.NewEmail" class="text-danger"></span>
             </div>

src/Identity/UI/src/Areas/Identity/Pages/V5/Account/Manage/EnableAuthenticator.cshtml

@@ -32,7 +32,7 @@
                 with a unique code. Enter the code in the confirmation box below.
             </p>
             <div class="row">
-                <div class="col-md-6">
+                <div class="col-xl-6">
                     <form id="send-code" method="post">
                         <div class="form-floating mb-3">
                             <input asp-for="Input.Code" class="form-control" autocomplete="off" placeholder="Please enter the code."/>

src/Identity/UI/src/Areas/Identity/Pages/V5/Account/Manage/Index.cshtml

@@ -12,11 +12,11 @@
         <form id="profile-form" method="post">
             <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
             <div class="form-floating mb-3">
-                <input asp-for="Username" class="form-control" placeholder="Please choose your username." disabled />
+                <input asp-for="Username" class="form-control" placeholder="Choose your username" disabled />
                 <label asp-for="Username" class="form-label"></label>
             </div>
             <div class="form-floating mb-3">
-                <input asp-for="Input.PhoneNumber" class="form-control" placeholder="Please enter your phone number."/>
+                <input asp-for="Input.PhoneNumber" class="form-control" placeholder="Enter your phone number"/>
                 <label asp-for="Input.PhoneNumber" class="form-label"></label>
                 <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
             </div>

src/Identity/UI/src/Areas/Identity/Pages/V5/Account/Manage/SetPassword.cshtml

@@ -12,16 +12,16 @@
     account so you can log in without an external login.
 </p>
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-6">
         <form id="set-password-form" method="post">
             <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
             <div class="form-floating mb-3">
-                <input asp-for="Input.NewPassword" class="form-control" autocomplete="new-password" placeholder="Please enter your new password."/>
+                <input asp-for="Input.NewPassword" class="form-control" autocomplete="new-password" placeholder="Enter the new password"/>
                 <label asp-for="Input.NewPassword" class="form-label"></label>
                 <span asp-validation-for="Input.NewPassword" class="text-danger"></span>
             </div>
             <div class="form-floating mb-3">
-                <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" placeholder="Please confirm your new password."/>
+                <input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" placeholder="Enter the new password"/>
                 <label asp-for="Input.ConfirmPassword" class="form-label"></label>
                 <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
             </div>

src/Identity/UI/src/Areas/Identity/Pages/V5/Account/Manage/_Layout.cshtml

@@ -15,10 +15,10 @@
     <h2>Change your account settings</h2>
     <hr />
     <div class="row">
-        <div class="col-md-3">
+        <div class="col-lg-3">
             <partial name="_ManageNav" />
         </div>
-        <div class="col-md-9">
+        <div class="col-lg-9">
             @RenderBody()
         </div>
     </div>

src/Identity/UI/src/Areas/Identity/Pages/V5/Account/Register.cshtml

@@ -7,7 +7,7 @@
 <h1>@ViewData["Title"]</h1>
 
 <div class="row">
-    <div class="col-md-4">
+    <div class="col-lg-6">
         <form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post">
             <h2>Create a new account.</h2>
             <hr />
@@ -30,7 +30,7 @@
             <button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
         </form>
     </div>
-    <div class="col-md-6 col-md-offset-2">
+    <div class="col-lg-4 col-lg-offset-2">
         <section>
             <h3>Use another service to register.</h3>
             <hr />

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Login.razor

@@ -14,7 +14,7 @@
 
 <h1>Log in</h1>
 <div class="row">
-    <div class="col-md-4">
+    <div class="col-lg-6">
         <section>
             <StatusMessage Message="@errorMessage" />
             <EditForm Model="Input" method="post" OnValidSubmit="LoginUser" FormName="login">
@@ -55,7 +55,7 @@
             </EditForm>
         </section>
     </div>
-    <div class="col-md-6 col-md-offset-2">
+    <div class="col-lg-4 col-lg-offset-2">
         <section>
             <h3>Use another service to log in.</h3>
             <hr />

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Manage/ChangePassword.razor

@@ -15,22 +15,22 @@
 <h3>Change password</h3>
 <StatusMessage Message="@message" />
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-6">
         <EditForm Model="Input" FormName="change-password" OnValidSubmit="OnValidSubmitAsync" method="post">
             <DataAnnotationsValidator />
             <ValidationSummary class="text-danger" role="alert" />
             <div class="form-floating mb-3">
-                <InputText type="password" @bind-Value="Input.OldPassword" id="Input.OldPassword" class="form-control" autocomplete="current-password" aria-required="true" placeholder="Please enter your old password." />
+                <InputText type="password" @bind-Value="Input.OldPassword" id="Input.OldPassword" class="form-control" autocomplete="current-password" aria-required="true" placeholder="Enter the old password" />
                 <label for="Input.OldPassword" class="form-label">Old password</label>
                 <ValidationMessage For="() => Input.OldPassword" class="text-danger" />
             </div>
             <div class="form-floating mb-3">
-                <InputText type="password" @bind-Value="Input.NewPassword" id="Input.NewPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Please enter your new password." />
+                <InputText type="password" @bind-Value="Input.NewPassword" id="Input.NewPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Enter the new password" />
                 <label for="Input.NewPassword" class="form-label">New password</label>
                 <ValidationMessage For="() => Input.NewPassword" class="text-danger" />
             </div>
             <div class="form-floating mb-3">
-                <InputText type="password" @bind-Value="Input.ConfirmPassword" id="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Please confirm your new password." />
+                <InputText type="password" @bind-Value="Input.ConfirmPassword" id="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Enter the new password" />
                 <label for="Input.ConfirmPassword" class="form-label">Confirm password</label>
                 <ValidationMessage For="() => Input.ConfirmPassword" class="text-danger" />
             </div>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Manage/Email.razor

@@ -18,7 +18,7 @@
 
 <StatusMessage Message="@message"/>
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-6">
         <form @onsubmit="OnSendEmailVerificationAsync" @formname="send-verification" id="send-verification-form" method="post">
             <AntiforgeryToken />
         </form>
@@ -28,7 +28,7 @@
             @if (isEmailConfirmed)
             {
                 <div class="form-floating mb-3 input-group">
-                    <input type="text" value="@email" id="email" class="form-control" placeholder="Please enter your email." disabled />
+                    <input type="text" value="@email" id="email" class="form-control" placeholder="Enter your email" disabled />
                     <div class="input-group-append">
                         <span class="h-100 input-group-text text-success font-weight-bold">✓</span>
                     </div>
@@ -38,13 +38,13 @@
             else
             {
                 <div class="form-floating mb-3">
-                    <input type="text" value="@email" id="email" class="form-control" placeholder="Please enter your email." disabled />
+                    <input type="text" value="@email" id="email" class="form-control" placeholder="Enter your email" disabled />
                     <label for="email" class="form-label">Email</label>
                     <button type="submit" class="btn btn-link" form="send-verification-form">Send verification email</button>
                 </div>
             }
             <div class="form-floating mb-3">
-                <InputText @bind-Value="Input.NewEmail" id="Input.NewEmail" class="form-control" autocomplete="email" aria-required="true" placeholder="Please enter new email." />
+                <InputText @bind-Value="Input.NewEmail" id="Input.NewEmail" class="form-control" autocomplete="email" aria-required="true" placeholder="Enter a new email" />
                 <label for="Input.NewEmail" class="form-label">New email</label>
                 <ValidationMessage For="() => Input.NewEmail" class="text-danger" />
             </div>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Manage/EnableAuthenticator.razor

@@ -48,11 +48,11 @@ else
                     with a unique code. Enter the code in the confirmation box below.
                 </p>
                 <div class="row">
-                    <div class="col-md-6">
+                    <div class="col-xl-6">
                         <EditForm Model="Input" FormName="send-code" OnValidSubmit="OnValidSubmitAsync" method="post">
                             <DataAnnotationsValidator />
                             <div class="form-floating mb-3">
-                                <InputText @bind-Value="Input.Code" id="Input.Code" class="form-control" autocomplete="off" placeholder="Please enter the code." />
+                                <InputText @bind-Value="Input.Code" id="Input.Code" class="form-control" autocomplete="off" placeholder="Enter the code" />
                                 <label for="Input.Code" class="control-label form-label">Verification Code</label>
                                 <ValidationMessage For="() => Input.Code" class="text-danger" />
                             </div>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Manage/Index.razor

@@ -15,16 +15,16 @@
 <StatusMessage />
 
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-6">
         <EditForm Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post">
             <DataAnnotationsValidator />
             <ValidationSummary class="text-danger" role="alert" />
             <div class="form-floating mb-3">
-                <input type="text" value="@username" id="username" class="form-control" placeholder="Please choose your username." disabled />
+                <input type="text" value="@username" id="username" class="form-control" placeholder="Choose your username." disabled />
                 <label for="username" class="form-label">Username</label>
             </div>
             <div class="form-floating mb-3">
-                <InputText @bind-Value="Input.PhoneNumber" id="Input.PhoneNumber" class="form-control" placeholder="Please enter your phone number." />
+                <InputText @bind-Value="Input.PhoneNumber" id="Input.PhoneNumber" class="form-control" placeholder="Enter your phone number" />
                 <label for="Input.PhoneNumber" class="form-label">Phone number</label>
                 <ValidationMessage For="() => Input.PhoneNumber" class="text-danger" />
             </div>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Manage/SetPassword.razor

@@ -18,17 +18,17 @@
     account so you can log in without an external login.
 </p>
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-6">
         <EditForm Model="Input" FormName="set-password" OnValidSubmit="OnValidSubmitAsync" method="post">
             <DataAnnotationsValidator />
             <ValidationSummary class="text-danger" role="alert" />
             <div class="form-floating mb-3">
-                <InputText type="password" @bind-Value="Input.NewPassword" id="Input.NewPassword" class="form-control" autocomplete="new-password" placeholder="Please enter your new password." />
+                <InputText type="password" @bind-Value="Input.NewPassword" id="Input.NewPassword" class="form-control" autocomplete="new-password" placeholder="Enter the new password" />
                 <label for="Input.NewPassword" class="form-label">New password</label>
                 <ValidationMessage For="() => Input.NewPassword" class="text-danger" />
             </div>
             <div class="form-floating mb-3">
-                <InputText type="password" @bind-Value="Input.ConfirmPassword" id="Input.ConfirmPassword" class="form-control" autocomplete="new-password" placeholder="Please confirm your new password." />
+                <InputText type="password" @bind-Value="Input.ConfirmPassword" id="Input.ConfirmPassword" class="form-control" autocomplete="new-password" placeholder="Enter the new password" />
                 <label for="Input.ConfirmPassword" class="form-label">Confirm password</label>
                 <ValidationMessage For="() => Input.ConfirmPassword" class="text-danger" />
             </div>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Register.razor

@@ -20,7 +20,7 @@
 <h1>Register</h1>
 
 <div class="row">
-    <div class="col-md-4">
+    <div class="col-lg-6">
         <StatusMessage Message="@Message" />
         <EditForm Model="Input" asp-route-returnUrl="@ReturnUrl" method="post" OnValidSubmit="RegisterUser" FormName="register">
             <DataAnnotationsValidator />
@@ -45,7 +45,7 @@
             <button type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
         </EditForm>
     </div>
-    <div class="col-md-6 col-md-offset-2">
+    <div class="col-lg-4 col-lg-offset-2">
         <section>
             <h3>Use another service to register.</h3>
             <hr />

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Shared/ManageLayout.razor

@@ -11,10 +11,10 @@
     <h2>Change your account settings</h2>
     <hr />
     <div class="row">
-        <div class="col-md-3">
+        <div class="col-lg-3">
             <ManageNavMenu />
         </div>
-        <div class="col-md-9">
+        <div class="col-lg-9">
             @Body
         </div>
     </div>