fix(form-field): long labels and option values going under select arrow (#14268)

Fixes very long form field labels and option value colliding with the arrow that is rendered next to a `select` inside a `mat-form-field`.

Author: crisbeto

src/lib/form-field/form-field-input.scss

@@ -193,6 +193,22 @@ select.mat-input-element {
     }
   }
 
+  .mat-input-element {
+    // The arrow is 2 * $arrow-size wide and we add one more width for some spacing.
+    $padding: $arrow-size * 3;
+    padding-right: $padding;
+
+    [dir='rtl'] & {
+      padding-right: 0;
+      padding-left: $padding;
+    }
+  }
+
+  // Ensure that long labels don't collide with the select arrow.
+  .mat-form-field-label-wrapper {
+    max-width: calc(100% - #{$arrow-size * 2});
+  }
+
   &.mat-form-field-appearance-outline .mat-form-field-infix::after {
     margin-top: -$arrow-size;
   }

src/lib/form-field/form-field.scss

@@ -73,6 +73,13 @@ $mat-form-field-default-infix-width: 180px !default;
   height: 100%;
   overflow: hidden;
   pointer-events: none;  // We shouldn't catch mouse events (let them through).
+
+  [dir='rtl'] & {
+    // Usually this isn't necessary since the element is 100% wide, but
+    // when we've got a `select` node, we need to set a `max-width` on it.
+    left: auto;
+    right: 0;
+  }
 }
 
 // The label itself. This is invisible unless it is. The logic to show it is