mat-hint type descender and uppercase accents are cropped in mat-form-field

Bug, feature request, or proposal:

Bug

What is the expected behavior?

All alphabet letters should be readable.

What is the current behavior?

The lower case letters that have descenders (g, j, p, q and y) should not be cropped in mat-hint

What are the steps to reproduce?

• Go to https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown
• Take a look at the example, the y from the “Errors appear instantly!” hint is cropped at the button, this would be more obvious if you open your dev-tools and add a g in there (the curved descender goes away)

What is the use-case or motivation for changing an existing behavior?

Text readability.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Probably a very recent build, the package-lock.json from the material.angular.io repo points to a commit.

Is there anything else we should know?

1. I’ve tested only on openSUSE Linux.

2. The Material Design specification doesn’t say much about the “Helper text”: https://material.io/guidelines/components/text-fields.html#text-fields-layout

3. The .mat-form-field line-height is inherited by .mat-hint. The problem goes away if you add .mat-hint { line-height: initial; }, but this solution doesn’t seem right, probably, the line-height on the .mat-form-field should not be that small: 1.125

[mmalerba]

Interesting, I tested Chrome & Firefox on Debian and Chrome, Firefox, and Safari on OS X. All seem fine, I wonder if maybe its specific to openSUSE?

Also here’s another workaround that should have less side effects for the rest of your app (won’t affect the sizing of any elements):

.mat-form-field .mat-form-field-subscript-wrapper {
  overflow: visible;
}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}