fix(select): Prevent overflow on smaller screens

- Set max-width of component to 100% - the size of the padding added to
  accomodate the drop-down arrow
- Truncate overflowing selected text, similar to a normal <select>
  element

[Delivers #136281135]
Resolves #112

.stylelintrc.yaml

@@ -259,9 +259,12 @@ rules:
 
   # SCSS naming patterns, just like our CSS conventions above.
   # (note for $-vars we use a leading underscore for "private" variables)
-  scss/dollar-variable-pattern: ^_?mdc?-.+
-  scss/at-function-pattern: ^mdc?-.+
-  scss/at-mixin-pattern: ^mdc?-.+
+  scss/dollar-variable-pattern:
+    - ^_?mdc-.+
+    -
+      ignore: local
+  scss/at-function-pattern: ^mdc-.+
+  scss/at-mixin-pattern: ^mdc-.+
   # Prevents unneeded nesting selectors
   scss/selector-no-redundant-nesting-selector: true
   # Since leading underscores are not needed, they can be omitted

package.json

@@ -94,5 +94,8 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "stylelint-scss": "^1.4.1"
   }
 }

packages/mdc-select/mdc-select.scss

@@ -27,9 +27,11 @@
 
 // postcss-bem-linter: define select
 .mdc-select {
+  $dd-arrow-padding: 24px;
+
   @include mdc-typography(subheading2);
   @include mdc-theme-prop(color, text-primary-on-light);
-  @include mdc-rtl-reflexive-box(padding, right, 24px);
+  @include mdc-rtl-reflexive-box(padding, right, $dd-arrow-padding);
 
   // Resets for <select> element
   appearance: none;
@@ -41,6 +43,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
+  max-width: calc(100% - #{$dd-arrow-padding});
   height: 32px;
   transition:
     mdc-animation-exit(border-bottom-color, 150ms),
@@ -95,6 +98,8 @@
     transition:
       mdc-animation-exit(opacity, 125ms),
       mdc-animation-exit(transform, 125ms);
+    white-space: nowrap;
+    overflow: hidden;
   }
 }