fix(expansion-panel): handle long text inside panel header title and description

Handles long text inside the `mat-panel-title` and `mat-panel-description`. Previously the text would continue wrapping and overflowing the header.

Fixes #10744.

Author: crisbeto

src/material/expansion/expansion-panel-header.scss

@@ -42,9 +42,13 @@
 
 .mat-expansion-panel-header-title,
 .mat-expansion-panel-header-description {
-  display: flex;
+  display: block;
   flex-grow: 1;
   margin-right: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-basis: 5%;
 
   [dir='rtl'] & {
     margin-right: 0;